/* ============================================================================
   FreeSoftwareX — design system  (v2, Aug 2026 redesign)
   Light theme only, no external CSS, no framework. One file, one request.

   Conventions
   ─ 8px spacing scale (--s1…--s8), 14–18px radii on cards, 10–12px on controls
   ─ One brand hue (indigo) + one accent (cyan). Category colours are used only
     as a low-alpha tint on icon tiles, never as full-bleed card backgrounds.
   ─ Motion is 150–220ms and always disabled under prefers-reduced-motion.
   ========================================================================== */

/* Self-hosted Inter (variable, latin) — no Google Fonts CDN. Faster LCP, no
   external request, GDPR-clean (17-Aug-2026 AdSense/perf upgrade). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-var.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* surfaces */
  --bg:          #f7f8fb;   /* page — soft off-white */
  --surface:     #ffffff;   /* cards */
  --surface-2:   #f2f4f8;   /* inset / hover fills */
  --border:      #e5e8ef;
  --border-2:    #d3d8e3;

  /* ink — charcoal, never pure black */
  --ink:         #171a21;
  --ink-2:       #4b5566;   /* secondary text  (7.0:1 on white) */
  --ink-3:       #667085;   /* muted meta      (4.8:1 on white) */

  /* brand */
  --brand:       #4f46e5;   /* indigo 600 */
  --brand-ink:   #4338ca;   /* hover / pressed */
  --brand-soft:  #eef0ff;
  --brand-line:  #d9dcff;
  --link:        #4f46e5;   /* link text — see the dark override */
  --accent:      #0e7490;   /* cyan 700 — used sparingly, AA on white */
  --accent-soft: #e6f6fa;

  /* status */
  --ok:          #077d55;
  --ok-soft:     #e8f7f0;
  --warn:        #9a5b00;
  --warn-soft:   #fdf3e3;

  /* elevation — soft and minimal */
  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --sh-2: 0 2px 6px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --sh-3: 0 8px 28px rgba(16,24,40,.10), 0 2px 8px rgba(16,24,40,.06);

  /* radii */
  --r-card: 16px;
  --r-ctl:  11px;
  --r-sm:   9px;
  --r-pill: 999px;

  /* spacing (8px system) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 72px; --s8: 96px;

  --wrap: 1200px;
  --head-h: 68px;

  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--font);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -.021em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 650; }
h4 { font-size: 15px; font-weight: 650; }
p  { margin: 0 0 1em; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }

::selection { background: var(--brand-soft); color: var(--brand-ink); }

/* focus — always visible, never removed (WCAG 2.2 §2.4.11/2.4.13) */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--ink); padding: 12px 18px;
  border: 1px solid var(--border-2); border-radius: 0 0 var(--r-ctl) 0; font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; }

.wrap   { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; width: 100%; }
.narrow { max-width: 720px; }   /* the measure — see the prose rules further down */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER  — clean white bar with a dropdown mega-nav (Aug-2026 v3 reference).
   Same bar, light or dark theme (colours ride the surface/ink custom
   properties, so it flips automatically with the toggle below).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --grad-a:     #8b5cf6;   /* violet  → */
  --grad-b:     #22d3ee;   /* cyan      */
  --cyan:       #22d3ee;
}

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .18s var(--ease);
}
.site-head.is-scrolled { box-shadow: 0 6px 22px rgba(16,24,40,.08); }

.head-bar {
  display: flex; align-items: center; gap: var(--s3);
  height: var(--head-h);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 17px; color: var(--ink); letter-spacing: -.02em; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #02d8f4 0%, #1428fa 100%);
  box-shadow: 0 2px 10px rgba(20, 40, 250, .35);
}
.brand-mark svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.brand-word { font-weight: 800; font-size: 18px; }
.brand-word em { font-style: normal; color: #0089fd; }
.brand-word i { font-style: normal; color: var(--ink); }
.brand-logo { display: block; height: 34px; width: auto; }
@media (max-width: 400px) { .brand-logo { height: 28px; } }

/* ── primary nav: flat links + dropdown groups ──────────────────────────── */
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s4); }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 12px; margin: 0; border: 0; background: none;
  color: var(--ink-2); font: 550 14.5px/1 var(--font); border-radius: var(--r-sm);
  cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease);
}
a.nav-link { text-decoration: none; }
.nav-link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav-link[aria-current="page"], .nav-item.is-active > .nav-link { color: var(--ink); font-weight: 700; }
.dd-caret { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 2.3; transition: transform .18s var(--ease); }
.has-dd.is-open .dd-caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .has-dd:hover .dd-caret { transform: rotate(180deg); } }

.dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; min-width: 208px;
  display: grid; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.dd-panel a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px; font-weight: 500;
}
.dd-panel a:hover, .dd-panel a[aria-current="page"] { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.has-dd.is-open .dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .has-dd:hover .dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
}

.head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

/* sun/moon theme switch — kept, but small and out of the way of the
   reference's control cluster (search / list-product / log in) */
.theme-toggle { background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0; }
.tt-track {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  width: 50px; height: 26px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border-2);
}
.tt-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sh-1); transition: transform .2s var(--ease);
}
[data-theme="dark"] .tt-knob { transform: translateX(24px); }
.tt-sun, .tt-moon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-3); stroke-width: 2; }
.tt-sun { margin-left: 1px; }
.tt-moon { margin-left: auto; margin-right: 1px; }
.theme-toggle:hover .tt-sun, .theme-toggle:hover .tt-moon { color: var(--ink); }

.head-search {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill);
  color: var(--ink-3); font: 500 14px/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.head-search:hover { border-color: var(--brand); color: var(--ink); background: var(--surface-2); }
.head-search .ico { width: 16px; height: 16px; flex: 0 0 16px; }

/* gradient CTA, violet → cyan, exactly as the reference */
.btn-grad {
  background: linear-gradient(90deg, var(--grad-a) 0%, #6366f1 45%, var(--grad-b) 100%);
  border: 0; color: #fff; font-weight: 600; box-shadow: 0 2px 14px rgba(99,102,241,.35);
}
.btn-grad:hover { background: linear-gradient(90deg, #7c3aed 0%, #4f46e5 45%, #06b6d4 100%); color: #fff; }
.btn-grad .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.head-actions .btn-grad { white-space: nowrap; }

.kbd {
  font: 600 11px/1 var(--font); color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 6px; padding: 4px 6px;
}
.ico { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer; padding: 0;
}
.burger:hover { border-color: var(--brand); }
.burger .ico { width: 20px; height: 20px; }

/* brand + nav + actions need ~1225px before the login control was removed;
   without it the cluster is narrower, but keep the same handover point —
   still the safe boundary where the desktop nav's own item list starts
   wrapping on smaller wrap widths. */
@media (max-width: 1300px) { .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 760px) {
  /* the CTA lives in the drawer on small screens — it will not fit across
     a 390px bar without shrinking below a 44px target */
  .head-actions .btn-grad, .theme-toggle { display: none; }
  .head-search { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--r-sm); }
  .head-search .hs-label { display: none; }
  .head-bar { gap: 8px; }
  .head-actions { gap: 6px; }
}
@media (max-width: 400px) { .brand { font-size: 16px; } .brand-word { font-size: 16px; } }

/* mobile drawer */
.scrim {
  position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 70;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 340px); z-index: 80;
  background: var(--surface); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .22s var(--ease);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.drawer.open { transform: translateX(0); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.drawer-close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border-2); border-radius: var(--r-ctl); color: var(--ink); cursor: pointer;
}
.drawer nav { display: flex; flex-direction: column; padding: 8px; }
.drawer nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--r-ctl);
  color: var(--ink); font-weight: 550; font-size: 16px;
}
.drawer nav a:hover { background: var(--surface-2); text-decoration: none; }
.drawer nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); }
.drawer-label {
  display: block; margin: 10px 0 2px; padding: 0 12px;
  color: var(--ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.drawer-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.drawer-foot .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.drawer-foot .btn .ico { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS & CONTROLS
   ═══════════════════════════════════════════════════════════════════════ */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px; border-radius: var(--r-ctl);
  font: 650 15px/1.2 var(--font); cursor: pointer; text-align: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn { background: var(--brand); color: #fff; border: 1px solid var(--brand); box-shadow: var(--sh-1); }
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; text-decoration: none; }
.btn:active { box-shadow: none; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--surface); text-decoration: none; }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
/* touch layouts get the full 44px target even on the compact button */
@media (max-width: 900px) { .btn-sm { min-height: 44px; } }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 16.5px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }
.btn-note { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 10px 0 0; line-height: 1.55; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
}
/* Licence badge. The generator emits three custom properties per badge:
   --lc  the palette hue (used for the tint + border)
   --lc-t  an AA-safe darkened variant for text on light surfaces
   --lc-d  an AA-safe lightened variant for text on dark surfaces */
.badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 650; letter-spacing: .005em; white-space: nowrap;
  background: color-mix(in srgb, var(--lc, var(--brand)) 8%, transparent);
  color: var(--lc-t, var(--brand-ink));
  border: 1px solid color-mix(in srgb, var(--lc, var(--brand)) 20%, transparent);
}
/* leading check-disc (card pills only). Set here rather than as presentation
   attributes because .ico's fill:none would win over them. */
.badge-dot { gap: 5px; padding-left: 7px; }
.badge-dot .ico { width: 13px; height: 13px; flex: 0 0 13px; }
.badge-dot .ico circle { fill: currentColor; stroke: none; }
.badge-dot .ico .tick { stroke: var(--surface); stroke-width: 2.6; }
/* 12.5/--ink-2, not 11.5/--ink-3: these pills sit on --surface-2 rather than
   white, where --ink-3 falls to ~4.6:1 — technically AA, but at 11.5px it was
   the least legible text on the page while carrying real information (which
   platforms the program runs on). */
.plat {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   SEARCH  (hero field, overlay, results list)
   ═══════════════════════════════════════════════════════════════════════ */
.search-wrap { position: relative; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field > .ico {
  position: absolute; left: 18px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none;
}
.search {
  width: 100%; min-height: 58px; padding: 16px 18px 16px 50px; font: 400 16.5px/1.4 var(--font);
  color: var(--ink); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 14px; outline: none; box-shadow: var(--sh-1);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search::placeholder { color: var(--ink-3); }
.search:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search::-webkit-search-cancel-button { -webkit-appearance: none; }

.results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 55; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--sh-3); max-height: 60vh; overflow-y: auto; display: none; padding: 6px;
}
.results.show { display: block; }
.results a {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink);
}
.results a:hover, .results a.is-active { background: var(--surface-2); text-decoration: none; }
.results a.is-active { box-shadow: inset 0 0 0 1px var(--brand-line); }
.results .r-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 750; font-size: 13px; }
.results .r-txt  { flex: 1; min-width: 0; }
.results .r-name { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .r-sub  { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .r-cat  { flex: 0 0 auto; font-size: 12px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
@media (max-width: 460px) { .results .r-cat { display: none; } }
.results .r-empty { padding: 22px 16px; color: var(--ink-3); font-size: 14px; text-align: center; }
.results .r-head { padding: 8px 12px 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.results .r-all { justify-content: center; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.results .r-all .r-name { color: var(--brand-ink); font-size: 14px; }

/* paired full-width CTAs (comparison pages) */
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0 0 var(--s4); }
.btn-pair .btn { width: 100%; }
@media (max-width: 660px) { .btn-pair { grid-template-columns: minmax(0, 1fr); } }

/* a category link rendered in the pill style (software detail meta row) */
a.plat:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }

/* full-screen overlay search (header button, ⌘K, mobile) */
.sk { position: fixed; inset: 0; z-index: 90; display: none; }
.sk.open { display: block; }
.sk-scrim { position: absolute; inset: 0; background: rgba(16,24,40,.42); }
.sk-panel {
  position: relative; max-width: 640px; margin: 8vh auto 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-3);
  padding: 14px; animation: sk-in .18s var(--ease);
}
@keyframes sk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sk-panel .search { min-height: 52px; font-size: 16px; }
.sk-panel .results {
  position: static; display: block; box-shadow: none; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; margin-top: 12px; padding: 6px 0 0; max-height: min(52vh, 420px);
}
.sk-hint { display: flex; gap: 14px; align-items: center; padding: 10px 4px 2px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
@media (max-width: 620px) {
  .sk-panel { margin: 0; max-width: none; height: 100%; border-radius: 0; border: 0; display: flex; flex-direction: column; }
  .sk-panel .results { max-height: none; flex: 1; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-2);
  color: var(--ink-2); font-size: 13.5px; font-weight: 550; cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --night:      #0d102d;   /* hero base */
  --night-2:    #221338;   /* purple glow, top-left */
  --night-3:    #0b1a38;   /* blue glow, right */
  --night-ink:  #ffffff;
  --night-ink-2:#b6bbd4;
}
/* ── hero (light two-column, per the v3 reference) ─────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(34px, 4.6vw, 68px) 0 clamp(28px, 3.4vw, 44px);
  background:
    radial-gradient(58% 78% at 88% 18%, rgba(139,92,246,.13) 0%, transparent 62%),
    radial-gradient(46% 70% at 12% 4%,  rgba(34,211,238,.10) 0%, transparent 60%),
    linear-gradient(180deg, #fbfbff 0%, var(--bg) 100%);
}
.hero > .wrap { position: relative; z-index: 2; }

/* search field + the solid indigo submit tile on its right edge — the
   search bar itself now lives inline in the slider's CTA bar
   (.promo-search below); these rules just style the shared .search/
   .search-go parts wherever they're used inside .hero */
.hero .search-wrap { max-width: none; margin: 0; }
.hero .search {
  min-height: 62px; padding: 16px 74px 16px 52px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 6px 22px rgba(16,24,40,.07);
}
.hero .search:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), 0 6px 22px rgba(16,24,40,.07); }
.search-go {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); border: 0; border-radius: 11px; color: #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(79,70,229,.35); transition: background .15s var(--ease);
}
.search-go:hover { background: var(--brand-ink); }
.search-go .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.hero .results { text-align: left; }

/* the four-up assurance strip under the slider */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: clamp(30px, 3.6vw, 46px) 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh-2);
}
.trust li {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-left: 1px solid var(--border);
}
.trust li:first-child { border-left: 0; }
.trust .ico { width: 30px; height: 30px; flex: 0 0 30px; padding: 6px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand); stroke-width: 1.8; }
.trust span { display: flex; flex-direction: column; min-width: 0; }
.trust b { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.trust i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 980px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(3) { border-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust li { border-left: 0; }
  .trust li + li { border-top: 1px solid var(--border); }
  .hero .search { min-height: 56px; padding-right: 66px; }
  .search-go { width: 44px; height: 44px; }
}

/* ── hero banner slider: Sunlite Systems promo banners + CTA bar ────────── */
.hero--slider { padding-bottom: clamp(20px, 2.6vw, 30px); }
/* overflow:hidden lives on .promo-track/.promo-cta-bar individually rather
   than on .promo-card — the card itself stays overflow:visible so the
   search-suggestions dropdown (a child of the CTA bar) can extend below the
   card instead of being clipped off after its first row. */
.promo-card {
  position: relative; border-radius: 22px;
  background: #0b1030;
  box-shadow: 0 20px 50px rgba(17,20,60,.28);
}
/* every slide occupies the same grid cell, so the track's height auto-fits
   the tallest one instead of needing a guessed min-height (the old
   position:absolute stacking couldn't size itself from image content) */
.promo-track { position: relative; display: grid; overflow: hidden; border-radius: 22px 22px 0 0; }
.promo-slide {
  grid-area: 1 / 1; display: block; line-height: 0;
  opacity: 0; visibility: hidden; transform: translateX(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.promo-slide.is-active {
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.promo-banner-img { display: block; width: 100%; height: auto; }

/* one shared control strip under the image rather than a button baked into
   each slide — the CTA is identical on every slide, and keeping it outside
   the crossfading track means it never overlaps the banner artwork */
.promo-cta-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s3); padding: var(--s4) var(--s5);
  background: linear-gradient(120deg, #0b1030 0%, #171b4d 46%, #1e2166 78%, #2a1f6e 100%);
  border-radius: 0 0 22px 22px;
}
.promo-cta { flex: 0 0 auto; box-shadow: 0 10px 26px rgba(79,70,229,.38); }

/* the search bar lives in the CTA bar's own slack space, between the button
   and the dots (Rohit, 12-Aug: "space hai right side wahi place karo") —
   flex:1 claims exactly that space instead of a hand-picked width */
.promo-search { flex: 1 1 240px; max-width: 640px; }
.promo-search .search-wrap { max-width: none; margin: 0; }
.promo-search .search {
  min-height: 46px; padding: 10px 50px 10px 42px; border-radius: 11px;
  box-shadow: 0 6px 18px rgba(4,6,24,.35);
}
.promo-search .ico { width: 17px; height: 17px; }
.promo-search .search-go { width: 34px; height: 34px; right: 6px; }
.promo-search .search-go .ico { width: 16px; height: 16px; }
.promo-search .results { text-align: left; }

.promo-dots { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.promo-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.32); transition: background .18s var(--ease), width .18s var(--ease);
}
.promo-dot.is-active { background: #fff; width: 22px; border-radius: var(--r-pill); }

.promo-arrow {
  /* centered via top+margin (not transform: translateY), so the hover state
     below can add its own transform without the two composing into a
     double vertical shift */
  position: absolute; top: 50%; margin-top: -20px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
  cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease);
}
.promo-arrow:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
.promo-arrow .ico { width: 18px; height: 18px; }
.promo-prev { left: var(--s2); }
.promo-next { right: var(--s2); }

@media (max-width: 700px) {
  /* button, search and dots stack — each claims the full row instead of
     squeezing three controls into one cramped line */
  .promo-cta-bar { flex-direction: column; align-items: stretch; }
  .promo-cta { width: 100%; justify-content: center; }
  .promo-search { max-width: none; }
  .promo-dots { justify-content: center; }
}
@media (max-width: 520px) {
  .promo-cta-bar { padding: var(--s3) var(--s4); }
  .promo-arrow { width: 34px; height: 34px; margin-top: -17px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-slide { transition: opacity .3s linear, visibility 0s linear .3s; }
}

.examples { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s1); margin-top: var(--s3); font-size: 13.5px; color: var(--ink-3); }
.examples .lbl { font-weight: 550; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s3); padding: 6px 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-2);
  font-size: 13px; font-weight: 600; color: var(--ink-2); box-shadow: var(--sh-1);
}
.eyebrow b { color: var(--brand-ink); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */
.section { padding: var(--s6) 0; }
/* consecutive plain sections share one gap rather than stacking two */
.section + .section { padding-top: 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* ...but a tinted band is a surface of its own, with its own top border, so it
   must keep its internal padding — without this the rule above collapsed it to
   zero and the band's heading sat 1px under the border. */
.section + .section.section-alt { padding-top: var(--s6); }
/* ...and the same on the way out: the band's bottom border closes it off, so
   whatever follows starts a new group and needs its own top padding rather
   than sitting 16px under that border. */
.section-alt + .section { padding-top: var(--s6); }
.section-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head .more { display: inline-flex; align-items: center; min-height: 32px; margin-left: auto; font-size: 14.5px; font-weight: 600; white-space: nowrap; }

/* centered "eyebrow + gradient title + underline" header, used only for the
   Explore by Category section (Mayank, 22-Aug) */
.cat-head-fancy { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.cat-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cat-eyebrow-line { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2) 55%, transparent); position: relative; }
.cat-eyebrow-line::before, .cat-eyebrow-line::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-2); transform: translateY(-50%);
}
.cat-eyebrow-line::before { left: 18%; }
.cat-eyebrow-line::after { left: 42%; }
.cat-eyebrow-pill {
  width: 34px; height: 10px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  box-shadow: 0 0 16px 3px rgba(124, 58, 237, .45);
}
.cat-head-fancy h2 {
  font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; color: #0f1222;
}
.cat-head-fancy h2 em {
  font-style: normal; background: linear-gradient(90deg, #7c3aed, #2563eb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cat-underline { width: 90px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #2563eb); }
.cat-head-fancy .more { margin: 4px 0 0; }
.sub { color: var(--ink-2); margin: -14px 0 var(--s3); max-width: 68ch; }
.page-head { padding: var(--s5) 0 var(--s3); }
.page-head h1 { margin-bottom: .3em; }
/* on the category pages the title moved into .cat-hero, so this block carries
   only the breadcrumb — 24px of padding under a single line of 13px text left
   the crumb floating in the middle of nowhere */
.page-head.crumbs-only { padding: var(--s4) 0 var(--s2); }

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--s2); }
/* pastel-washed compact card with a vivid gradient icon tile (reference look);
   --g1/--g2 are the category's gradient stops, set inline by the generator */
.cat-card {
  display: flex; flex-direction: column; padding: 22px 20px 18px; color: var(--ink);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--g1, var(--brand)) 10%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.cat-card:hover, .cat-card:focus-visible { text-decoration: none; border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.c-tile {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 16px; color: #fff;
  background: linear-gradient(135deg, var(--g1, var(--brand)), var(--g2, var(--brand-ink)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--g2, var(--brand)) 32%, transparent);
}
.c-tile .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.cat-card h3 { margin: 0 0 8px; font-size: 16px; }
/* legacy tinted tile — still used by the search-suggestion rows */
.c-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px;
  background: color-mix(in srgb, var(--cc, var(--brand)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc, var(--brand)) 18%, transparent);
  color: var(--cc, var(--brand));
}
/* ── homepage "What are you looking for?" row ──────────────────────────────
   Eight compact tiles on one line: soft round icon badge over a short label
   and the real count. Distinct from .cat-card above, which stays the fuller
   left-aligned treatment used on /categories.html. */
.cat-row { display: flex; flex-wrap: nowrap; gap: 8px; }
.cat-row .cat-chip { flex: 1 1 0; min-width: 0; padding: 14px 4px 30px; }
.cat-row .cc-badge { width: 40px; height: 40px; border-radius: 12px; }
.cat-row .cc-badge .ico { width: 18px; height: 18px; }
.cat-row .cc-name { font-size: 11.5px; }
.cat-row .cc-arrow { right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 6px; }
.cat-row .cc-arrow .ico { width: 11px; height: 11px; }
@media (max-width: 640px) {
  /* 11 chips in one line have no room left for text at phone widths — the
     labels were overlapping between chips. Icons-only keeps it one clean
     row instead (name is still read via the link's aria-label). */
  .cat-row .cat-chip { padding: 10px 2px; gap: 0; }
  .cat-row .cc-name, .cat-row .cc-arrow { display: none; }
}
.cat-chip {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px;
  padding: 20px 10px 40px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.cat-chip:hover, .cat-chip:focus-visible {
  text-decoration: none; border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px);
}
.cc-badge {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--g1, var(--brand)) 14%, transparent);
  color: var(--cc, var(--brand));
}
.cc-badge .ico { width: 24px; height: 24px; stroke-width: 1.8; }
.cc-badge-img { background: none; }
.cc-badge-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.cc-name { font-size: 13.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.cc-count { font-size: 12.5px; color: var(--ink-3); }
.cc-arrow {
  position: absolute; right: 12px; bottom: 12px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--cc, var(--brand));
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.cc-arrow .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.cat-chip:hover .cc-arrow { background: color-mix(in srgb, var(--g1, var(--brand)) 14%, transparent); border-color: var(--cc, var(--brand)); }
[data-theme="dark"] .cc-badge {
  background: color-mix(in srgb, var(--g1, var(--brand)) 22%, transparent);
  color: var(--cc-d, var(--brand-ink));
}
[data-theme="dark"] .cc-arrow { color: var(--cc-d, var(--brand-ink)); }
/* Explore by Category: always one row, all chips shrinking to fit — no
   wrap, no horizontal-scroll slider (Mayank, 26-Aug: tried wrapping to 2
   rows first, but he wants a single line with no slider either way). */

.c-count {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-size: 13px; font-weight: 650; color: var(--brand-ink);
}
.c-count .arw { transition: transform .18s var(--ease); }
.cat-card:hover .c-count .arw { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════════
   SOFTWARE CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr)); gap: var(--s2); }
.app-card {
  position: relative; display: flex; flex-direction: column; padding: 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); color: var(--ink); box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.app-card:hover, .app-card:focus-within { text-decoration: none; border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
/* header row: gradient logo tile left, licence tag pill right */
.app-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.app-ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 16px; font-weight: 750; color: #fff; letter-spacing: -.03em;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.14);
}
.app-ico-img { object-fit: contain; background: none; box-shadow: none; border-radius: 10px; }
.app-card h3 { margin: 0 0 3px; font-size: 17px; }
.app-card h3 a { color: inherit; }
.app-card h3 a:hover { color: var(--brand-ink); text-decoration: none; }
.app-vendor { font-size: 13.5px; color: var(--ink-2); }
/* the program's own one-line pitch, from the data — replaces the old 3-bullet
   feature list, which stacked to a wall once six cards sat side by side */
.app-tag {
  margin: 12px 0 14px; flex: 1;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
/* licence pill and platform marks sit on their OWN lines, as in the reference */
.app-meta { display: flex; margin-bottom: 10px; }
.app-plats { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.pico { width: 15px; height: 15px; flex: 0 0 15px; fill: var(--ink-3); stroke: none; }
.pico-txt { font-size: 11px; color: var(--ink-3); }
.app-view { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 650; color: var(--link); }

/* save toggle — sits above the card's stretch overlay so it never navigates */
.app-save {
  position: relative; z-index: 3; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; margin: -4px -4px 0 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink-3); transition: color .15s var(--ease), background .15s var(--ease);
}
.app-save:hover { color: #e11d48; background: color-mix(in srgb, #e11d48 10%, transparent); }
.app-save .ico { width: 19px; height: 19px; }
.app-save[aria-pressed="true"] { color: #e11d48; }
.app-save[aria-pressed="true"] .ico { fill: #e11d48; }

/* the homepage row: six across on one line, exactly as in the reference. The
   type is set as large as that column width takes without the two-line names
   (LibreOffice, Visual Studio Code) breaking the grid. */
.app-grid-lg { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
/* All-Marketing-Services promo banner, first slot in Popular Software —
   spans 2 of the row's columns so it reads as the lead item, stretched to
   match the other cards' row height via the grid's default item-stretch
   (Mayank, 26-Aug: removed 2 cards to make room for this). */
.app-promo-card {
  grid-column: span 2; position: relative; display: block; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--sh-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.app-promo-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); text-decoration: none; }
.app-promo-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.app-promo-card .app-promo-tag {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(8, 16, 34, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-weight: 700; font-size: 13px; text-align: center;
  padding: 10px 10px; border-radius: 9px;
}
@media (max-width: 430px) { .app-promo-card { grid-column: span 1; } }
.app-grid-lg .app-card { padding: 18px 16px 16px; }
.app-grid-lg .app-ico { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; font-size: 17px; }
.app-grid-lg .app-card h3 { font-size: 15.5px; line-height: 1.25; }
.app-grid-lg .app-vendor { font-size: 12.5px; }
.app-grid-lg .app-tag { font-size: 13px; line-height: 1.5; margin: 12px 0 14px; }
.app-grid-lg .app-view { font-size: 13px; }
.app-grid-lg .app-top { margin-bottom: 14px; }
/* a real screenshot/banner on top instead of the blank stretch that used to
   fill the gap between the tag and the meta row (Mayank, 26-Aug — image up
   top, content pushed down, no empty white gap). Scoped to app-grid-lg only
   — .app-tag's flex:1 stays as-is for app-card elsewhere on the site. */
.app-grid-lg .app-tag { flex: none; }
.app-grid-lg .app-hero-img {
  flex: 1 1 auto; min-height: 90px; width: 100%; object-fit: cover;
  border-radius: 10px; margin-bottom: 14px; display: block;
}
@media (max-width: 1100px) { .app-grid-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .app-grid-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .app-grid-lg { grid-template-columns: minmax(0, 1fr); } }

/* "Popular software this week" header + cards — accent bar, pill "view all"
   button, colored top-edge per card, bordered "View details" pill (Mayank,
   22-Aug); scoped so it doesn't touch app-card elsewhere on the site */
.pop-head-fancy { position: relative; padding-left: 16px; }
.pop-head-fancy::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px;
  border-radius: 999px; background: linear-gradient(180deg, #7c3aed, #2563eb);
}
.pop-head-fancy .more {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface); box-shadow: var(--sh-1);
}
.pop-head-fancy .more:hover { background: var(--surface-2); text-decoration: none; }
.app-grid-lg .app-card { position: relative; overflow: hidden; padding-top: 22px; }
.app-grid-lg .app-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--pop-accent, linear-gradient(90deg, #7c3aed, #2563eb));
}
.app-grid-lg .app-card:nth-child(6n+1) { --pop-accent: linear-gradient(90deg, #f59e0b, #eab308); }
.app-grid-lg .app-card:nth-child(6n+2) { --pop-accent: linear-gradient(90deg, #111827, #4b5563); }
.app-grid-lg .app-card:nth-child(6n+3) { --pop-accent: linear-gradient(90deg, #ec4899, #7c3aed, #2563eb); }
.app-grid-lg .app-card:nth-child(6n+4) { --pop-accent: linear-gradient(90deg, #22c55e, #16a34a); }
.app-grid-lg .app-card:nth-child(6n+5) { --pop-accent: linear-gradient(90deg, #a16207, #78350f); }
.app-grid-lg .app-card:nth-child(6n+6) { --pop-accent: linear-gradient(90deg, #38bdf8, #2563eb); }
.app-grid-lg .app-view {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface-2); font-weight: 650;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.app-grid-lg .app-card:hover .app-view { background: var(--surface); border-color: var(--brand); }

/* ════════════════════════════════════════════════════════════════════════
   FINDER  — "Not sure what to choose?"
   ═══════════════════════════════════════════════════════════════════════ */
.finder {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
  border-radius: 20px; border: 1px solid var(--border);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(99,102,241,.07) 0%, transparent 60%),
    var(--surface-2);
}
.fd-copy { flex: 0 0 auto; max-width: 280px; }
.fd-copy h2 { margin: 0 0 6px; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.02em; }
.fd-copy p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.fd-go { gap: 8px; }
.fd-go .arw { transition: transform .18s var(--ease); }
.fd-go:hover .arw { transform: translateX(3px); }

.fd-steps { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fd-arrow { flex: 0 0 auto; color: var(--brand); opacity: .45; font-size: 15px; }

/* one step: tinted badge, small label over a native <select> styled as the
   bold value, chevron on the right. The select stays a real select — the OS
   picker on mobile beats any custom dropdown we could write. */
.fd {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 34px 11px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.fd:hover { border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.fd:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fd-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--g1, var(--brand)) 12%, transparent);
  color: var(--g1, var(--brand));
  transition: background .25s var(--ease), color .25s var(--ease);
}
.fd-ico .ico, .fd-ico .pico { width: 19px; height: 19px; flex: 0 0 19px; }
.fd-ico .pico { fill: currentColor; }
/* the swap when a different option is picked — a quick scale/fade, no bounce */
.fd-ico.swap { animation: fd-swap .32s var(--ease); }
@keyframes fd-swap {
  0% { transform: scale(.72) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.fd-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.fd-body label { font-size: 11.5px; color: var(--ink-3); letter-spacing: .005em; }
.fd select {
  -webkit-appearance: none; appearance: none;
  padding: 0; border: 0; background: none; width: 100%;
  font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.fd select:focus { outline: none; }
.fd-chev { position: absolute; right: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }

.fd-submit {
  flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--brand);
  box-shadow: 0 4px 14px rgba(79,70,229,.35);
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.fd-submit:hover { background: var(--brand-ink); transform: scale(1.06); box-shadow: 0 6px 18px rgba(79,70,229,.45); }
.fd-submit:active { transform: scale(.95); }
.fd-submit .ico { width: 20px; height: 20px; }

@media (max-width: 1040px) {
  .finder { flex-direction: column; align-items: stretch; gap: 20px; }
  .fd-copy { max-width: none; }
}
@media (max-width: 720px) {
  .fd-steps { flex-wrap: wrap; }
  .fd { flex: 1 1 100%; }
  .fd-arrow { display: none; }
  .fd-submit { flex: 1 1 100%; width: 100%; border-radius: var(--r-sm); height: 46px; }
}

/* ── card motion ───────────────────────────────────────────────────────────
   One scroll-triggered reveal (opacity + a short rise, staggered per card by
   the --d the observer sets) and a few hover accents. Deliberately restrained:
   only compositor properties (opacity/transform) are animated, so this costs
   no layout work, and fsx.js strips the classes once the reveal has played so
   the .18s hover transition is never left running at reveal speed.
   The whole thing is inert under prefers-reduced-motion — see the block at the
   foot of this file, plus the JS reveals everything immediately in that case. */
.reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms),
              transform .5s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms);
}
.app-ico { transition: transform .22s var(--ease); }
.app-card:hover .app-ico { transform: scale(1.07); }
.app-view .arw { transition: transform .18s var(--ease); }
.app-card:hover .app-view .arw { transform: translateX(4px); }
.app-save .ico { transition: transform .18s var(--ease); }
.app-save:active .ico { transform: scale(.82); }
.app-save[aria-pressed="true"] .ico { animation: heart-pop .28s var(--ease); }
@keyframes heart-pop { 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.app-view .arw { transition: transform .18s var(--ease); font-weight: 700; }
.app-card:hover .app-view .arw { transform: translateX(3px); }
/* legacy pieces kept for the JS-rendered search-result cards */
.app-tag { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.55; flex: 1; }
.app-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-foot {
  display: flex; align-items: center; gap: var(--s1); margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-3);
}
.app-foot .go { margin-left: auto; font-weight: 650; color: var(--brand-ink); }
.app-card .stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }

.host { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); }
.host .ico { width: 14px; height: 14px; color: var(--ok); }

/* ════════════════════════════════════════════════════════════════════════
   LIST ROWS  (category / alternatives listings)
   ═══════════════════════════════════════════════════════════════════════ */
/* sticky so sort/filter stay reachable part-way down a long list */
.toolbar {
  position: sticky; top: calc(var(--head-h) + 8px); z-index: 20;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: var(--s2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-ctl); box-shadow: var(--sh-1);
}
.toolbar .count { font-size: 14px; color: var(--ink-2); font-weight: 550; }
.toolbar .count b { color: var(--ink); font-weight: 700; }
.toolbar .grow { margin-left: auto; }

/* applied-filter chips. Deliberately NOT .chip — that class is already taken
   by the neutral category pills fsx.js renders into the search panel, and
   reusing it here would restyle those too. */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 var(--s2); }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px;
  font: 600 13px/1 var(--font); color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-pill);
}
.fchip button {
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  font: 700 15px/1 var(--font); transition: background .15s var(--ease);
}
.fchip button:hover { background: rgba(79, 70, 229, .16); }
.fchip-clear {
  background: none; border: 0; padding: 5px 4px; cursor: pointer;
  font: 600 13px/1 var(--font); color: var(--ink-3); text-decoration: underline;
}
.fchip-clear:hover { color: var(--ink); }
.sortsel {
  min-height: 40px; padding: 8px 34px 8px 12px; font: 550 14px/1.2 var(--font); color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border-2); border-radius: var(--r-sm); appearance: none; cursor: pointer;
}
.sortsel:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.filter-btn { display: none; }

.rows { display: flex; flex-direction: column; gap: var(--s2); }
.row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 56px 1fr 190px; gap: 18px; align-items: start;
  padding: 20px 22px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
/* a hairline of brand colour that wipes in on hover — enough to mark the
   active row without repainting the whole card */
.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .2s var(--ease);
}
.row:hover { border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.row:hover::before { transform: scaleY(1); }

/* mark = the program's tile with its rank riding on the corner */
.row-mark { position: relative; width: 56px; }
.row .app-ico { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 15px; font-size: 20px; }
.row-rank {
  position: absolute; top: -7px; left: -7px; z-index: 1;
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: var(--sh-1); font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.row-main h3 { margin: 0; font-size: 18px; }
.row-main h3 a { color: var(--ink); }
.row-main h3 a:hover { color: var(--brand-ink); text-decoration: none; }
.row-tag { margin: 9px 0 11px; font-size: 14.5px; color: var(--ink-2); }
.row-feats { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.row-feats li { font-size: 13.5px; color: var(--ink-2); position: relative; padding-left: 20px; }
.row-feats li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23077d55' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
.row-cta {
  display: flex; flex-direction: column; gap: var(--s1); align-items: stretch;
  padding-left: 18px; border-left: 1px solid var(--border);
}
.row-price {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14.5px; font-weight: 700; color: var(--ok); margin-bottom: 2px;
}
.row-price .ico { width: 15px; height: 15px; stroke-width: 3; }
.row-cta .btn, .row-cta .btn-ghost { width: 100%; min-width: 0; }
.trunc { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hidden must win over the layout display values above */
[hidden] { display: none !important; }
/* the numbered rank is the editor's recommended order — meaningless once the
   list is re-sorted, so the sort control hides it (see fsx.js) */
.rows.unranked .row-rank { visibility: hidden; }

@media (max-width: 900px) { .filter-btn { display: inline-flex; } }

@media (max-width: 860px) {
  .row { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px; }
  .row-mark { width: 48px; }
  .row .app-ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; font-size: 18px; }
  /* the features are the reason to pick one program over another — the old
     rule hid all three on phones, which is where most of the traffic is.
     Keep two, stacked, and drop only the overflow. */
  .row-feats { flex-direction: column; gap: 5px; margin-bottom: 10px; }
  .row-feats li:nth-child(n+3) { display: none; }
  .row-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap;
             padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .row-cta .btn, .row-cta .btn-ghost { flex: 1 1 130px; }
  .row-price { margin: 0 4px 0 0; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   FILTERS  (sidebar → bottom sheet on mobile)
   ═══════════════════════════════════════════════════════════════════════ */
/* category hero — the H1 block sat as bare text on the page background, which
   gave the page no entry point. --ch / --ch-d are the category's AA-safe hue
   for light / dark, set inline per page. */
.cat-hero {
  position: relative; overflow: hidden; margin-bottom: var(--s3);
  padding: var(--s3) var(--s3) 20px; border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface) 55%, var(--brand-soft) 100%);
  border: 1px solid var(--border); box-shadow: var(--sh-1);
}
.cat-hero::after {   /* a wash of the category hue, kept low-alpha per the design rules */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 190px at 100% 0%, color-mix(in srgb, var(--ch) 13%, transparent), transparent 70%);
}
.cat-hero > * { position: relative; z-index: 1; }
.cat-hero-top { display: flex; align-items: flex-start; gap: 18px; }
.cat-hero-ico {
  display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 16px; font-size: 26px; line-height: 1;
  /* plain values first so a browser without color-mix() still gets a real tile */
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ch);
  background: color-mix(in srgb, var(--ch) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ch) 26%, var(--border));
}
.cat-hero-ico .ico { width: 28px; height: 28px; }
.cat-hero h1 { margin: 2px 0 0; }
.cat-hero .detail-lede { margin-bottom: 0; }
/* margin-bottom must go to 0 here — the strip's default 24px stacked on the
   hero's own bottom padding left ~44px of dead space under the pills */
.cat-hero .stat-strip { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
/* the pills default to --surface, which is the hero's own base colour, so they
   read as outlines floating on nothing */
.cat-hero .stat-strip li { background: var(--surface-2); }

@media (max-width: 640px) {
  .cat-hero { padding: 20px 18px 18px; }
  .cat-hero-top { gap: 14px; }
  .cat-hero-ico { flex-basis: 46px; width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
  .cat-hero-ico .ico { width: 23px; height: 23px; }
}

.cat-layout { display: grid; grid-template-columns: 252px 1fr; gap: var(--s3); align-items: start; }

/* The SEO copy under the listing. Centring it in the full wrap put its left
   edge at 200px — inside the GAP between the 252px filter sidebar and the
   results column that starts at 276px, so it lined up with neither and read
   as accidentally placed. Align it to the results column instead, which gives
   one continuous left edge from the toolbar all the way down the page. */
/* ── below the listing: guide, FAQ, onward links ───────────────────────────
   Spans the full measure rather than sitting in the results column: the filter
   sidebar has ended by this point, so the old offset left a large empty gutter
   and the block read as a stray column. */
.cat-more { margin: var(--s6) 0 0; }
.cat-more h2 { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.02em; margin: 0 0 12px; }

.cm-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cm-card {
  padding: 26px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cm-card:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.cm-card p { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 12px; }
.cm-card p:last-child { margin-bottom: 0; }
.cm-ico {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 12px; background: var(--brand-soft); color: var(--brand);
}
.cm-ico .ico { width: 21px; height: 21px; }
.cm-safe .cm-ico { background: var(--ok-soft); color: var(--ok); }

/* FAQ — native <details>, so it works with JS off and stays keyboard-operable */
.cm-faq { margin-top: var(--s5); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] { border-color: var(--brand-line); box-shadow: var(--sh-1); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 650; color: var(--ink); letter-spacing: -.012em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-ink); }
.faq-chev { flex: 0 0 20px; width: 20px; height: 20px; color: var(--ink-3); transition: transform .25s var(--ease); }
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--brand); }
.faq-body { padding: 0 20px 18px; }
.faq-body p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
/* the panel slides rather than snapping — cheap, and only runs on open */
.faq-item[open] .faq-body { animation: faq-open .28s var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* onward links — chips instead of blue bullet lists */
.cm-more { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.cm-links h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.lchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-2);
  color: var(--ink-2); font-size: 14px; font-weight: 550;
  transition: border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.lchip .ico { width: 15px; height: 15px; flex: 0 0 15px; color: var(--brand); opacity: .8; }
.lchip em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.lchip:hover {
  text-decoration: none; color: var(--brand-ink); border-color: var(--brand);
  transform: translateY(-1px); box-shadow: var(--sh-1);
}
.lchip:hover em { color: var(--brand-ink); }

@media (max-width: 860px) { .cm-guide { grid-template-columns: minmax(0, 1fr); } }
.filters { position: sticky; top: calc(var(--head-h) + 16px); }
.filters .card { padding: 18px; }
.filters h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; }
.fl {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; margin: 0 -8px;
  font-size: 14.5px; cursor: pointer; color: var(--ink-2); border-radius: var(--r-sm);
}
.fl:hover { background: var(--surface-2); }
.fl input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.fl .n { margin-left: auto; font-size: 12px; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; }
.sheet-head { display: none; }

@media (max-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .filters {
    position: fixed; inset: auto 0 0 0; z-index: 85; transform: translateY(101%);
    transition: transform .22s var(--ease); max-height: 82vh; overflow-y: auto;
    background: var(--surface); border-top: 1px solid var(--border); border-radius: 18px 18px 0 0;
    box-shadow: var(--sh-3); padding-bottom: env(safe-area-inset-bottom);
  }
  .filters.open { transform: translateY(0); }
  .filters .card { border: 0; box-shadow: none; border-radius: 0; padding: 8px 18px 22px; background: transparent; }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0;
    background: var(--surface); padding: 14px 18px 10px; border-bottom: 1px solid var(--border); z-index: 1;
  }
  .sheet-head h2 { margin: 0; font-size: 17px; }
  .sheet-head::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--border-2);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.crumb { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand-ink); }
.crumb .sep { margin: 0 7px; color: var(--ink-3); }

.detail { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s5); align-items: start; padding: var(--s3) 0 var(--s6); }
@media (max-width: 940px) {
  .detail { grid-template-columns: minmax(0,1fr); gap: var(--s3); }
  .sticky { position: static !important; }
  /* single column stacks the sidebar under the whole article, which buries the
     download button below ~1500px of prose on a phone. The name/badges already
     sit above the grid, so hoisting the sidebar puts the primary action right
     where it belongs — directly under the title. */
  .detail > aside { order: -1; }
}

.detail-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: var(--s3); }
/* the text column must be allowed to shrink: without min-width:0 a flex item
   refuses to go below its min-content, which on a long SEO H1 (or the
   "File Management & Compression" pill, which is nowrap) pushed the row
   past a 320px screen */
.detail-head > div { min-width: 0; }
.detail-head h1 { overflow-wrap: break-word; }
/* .plat is nowrap so pills never break mid-phrase in a row of them — but a
   long category name ("File Management & Compression") then cannot fit a
   320px screen at all. Allow wrapping only where nothing else will do. */
@media (max-width: 420px) { .plat { white-space: normal; } }
.detail-head .app-ico { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 18px; font-size: 26px; }
.detail-head h1 { margin: 0 0 5px; font-size: clamp(27px, 3.4vw, 38px); }
.detail-head .app-vendor { font-size: 14.5px; }
.detail-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-bottom: var(--s3); }

/* Long-form body copy. The rhythm below used to apply ONLY to .prose (the
   software detail pages), while the category, compare, alternatives, best-of
   and hub pages use .narrow — which set a max-width and nothing else. On those
   pages headings inherited the global `margin: 0 0 .5em`, i.e. NO top margin,
   so an <h2> sat ~16px under the previous paragraph and ~15px above its own
   text: closer to the block it did not belong to than the one it introduced,
   and an <h3> (9px below) was actively mis-grouped. Lists fell back to the
   browser's 40px indent. That is the uneven spacing — too much in some places,
   none in others — so both containers now share one scale. */
.prose, .narrow { min-width: 0; }
.prose h2, .narrow h2 { margin-top: var(--s5); font-size: 22px; }
.prose h3, .narrow h3 { margin-top: var(--s3); font-size: 17px; }
.prose h4, .narrow h4 { margin-top: var(--s2); }
.prose ul, .prose ol, .narrow ul, .narrow ol { padding-left: 22px; margin: 0 0 var(--s2); }
/* Body copy: 17px/1.72. At the previous 16px/1.65 across a 760px column the
   lines ran ~93 characters — well past the 45–75 range where the eye reliably
   finds the next line start, which is what made these blocks read as a wall.
   Bigger type over a slightly narrower measure (.narrow is now 720px) brings
   it to ~80 and costs nothing. */
.prose p, .narrow p { color: var(--ink-2); font-size: 17px; line-height: 1.72; }
.prose li, .narrow li { margin-bottom: 8px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.prose > p:first-of-type { color: var(--ink-2); }
/* a heading that opens the block has nothing above it to separate from */
.prose > :first-child, .narrow > :first-child { margin-top: 0; }
/* the in-content ad is a block interruption, not part of the rhythm — without
   this a heading after it collapses back to the default tight gap */
.prose .ad, .narrow .ad { margin: var(--s4) 0; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; box-shadow: var(--sh-1); }
.sticky { position: sticky; top: calc(var(--head-h) + 16px); }

.dl-card .dl-host {
  display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: var(--ink-2); text-align: center;
}
/* the domain takes its own line rather than wrapping mid-phrase — a long host
   like blackmagicdesign.com otherwise splits "Opens the official / site" */
.dl-card .dl-host b { flex: 0 0 100%; color: var(--ink); font-weight: 650; }
.dl-card .dl-host .ico { width: 15px; height: 15px; color: var(--ok); }

/* Spec table. The value column used to be right-aligned and pushed with
   margin-left:auto, so in a 340px card "Windows, macOS, Linux" wrapped to two
   ragged right-aligned lines and the eye had no common edge to run down. Left
   aligned against a fixed key column reads as a table, which is what it is. */
.spec { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--border); }
.spec li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.spec .k { color: var(--ink-3); flex: 0 0 86px; }
.spec .v { color: var(--ink); font-weight: 600; min-width: 0; }

/* the sticky card's own header — keeps the program named while it is pinned */
.dl-id { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dl-id .app-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; font-size: 15px; }
.dl-id-txt { min-width: 0; line-height: 1.3; }
.dl-id-txt b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.dl-id-txt span { font-size: 12.5px; color: var(--ink-3); }
.dl-card .btn .ico { width: 18px; height: 18px; }

/* Checked feature list — the same affordance the category rows use, so a
   feature reads as a confirmed capability rather than a generic bullet. Two
   columns where there is room; one below, since wrapped two-column items are
   harder to scan than a single list. */
.feat-list { list-style: none; padding: 0 !important; margin: 0 0 var(--s2); columns: 2; column-gap: var(--s3); }
.feat-list li {
  position: relative; padding-left: 26px; margin-bottom: 10px; break-inside: avoid;
  color: var(--ink-2); font-size: 15.5px; line-height: 1.55;
}
.feat-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23077d55' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
@media (max-width: 700px) { .feat-list { columns: 1; } }

/* the category chip in the header is a link, so it needs to look like one */
.plat-cat { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.plat-cat:hover { text-decoration: none; border-color: var(--brand); }

/* Mobile download bar. Revealed by fsx.js only once the real card is off
   screen, so it never duplicates a visible control. */
.dl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(16,24,40,.10);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(102%); transition: transform .22s var(--ease);
}
.dl-bar.show { transform: translateY(0); }
.dl-bar-in { display: flex; align-items: center; gap: 14px; max-width: var(--wrap); margin: 0 auto; }
.dl-bar-txt { min-width: 0; line-height: 1.3; }
.dl-bar-txt b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-bar-txt span { font-size: 12px; color: var(--ink-3); }
.dl-bar .btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.dl-bar .btn .ico { width: 16px; height: 16px; }
@media (min-width: 941px) { .dl-bar { display: none !important; } }
/* keep the bar from sitting on top of the last of the footer */
@media (max-width: 940px) { body.has-dlbar { padding-bottom: 72px; } }

/* ════════════════════════════════════════════════════════════════════════
   DOWNLOAD REQUEST MODAL
   The download CTA opens this instead of leaving for the publisher's site.
   ═══════════════════════════════════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(12, 16, 40, .55); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh-3); padding: 26px;
  animation: modal-in .2s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal-panel { animation: none; } }
.modal-x {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.modal-x:hover { background: var(--border); color: var(--ink); }
.modal-x .ico { width: 18px; height: 18px; }

.dlm-head { display: flex; gap: 14px; align-items: flex-start; margin: 0 30px 20px 0; }
.dlm-head .app-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; font-size: 16px; }
.dlm-head h2 { margin: 0 0 4px; font-size: 19px; }
.dlm-head p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.dlm-form { display: flex; flex-direction: column; gap: 13px; }
.dlm-form .btn { margin-top: 3px; }
.dlm-form .textarea { min-height: 78px; }
.dlm-form .opt { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
/* the modal is a light sheet even on the glass landings — frosted-on-frosted
   over a scrim turns the form fields to mud */
.sw-glass .modal-panel { background: var(--surface); backdrop-filter: none; }

.safety, .note {
  display: flex; gap: 12px; padding: 15px 16px; margin: 22px 0 0;
  background: var(--ok-soft); border: 1px solid rgba(7,125,85,.22);
  border-radius: var(--r-ctl); font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
}
.safety .ico, .note .ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--ok); margin-top: 1px; }
.safety b, .note b { color: var(--ink); }
.note-info { background: var(--brand-soft); border-color: var(--brand-line); }
.note-info .ico { color: var(--brand); }

/* trust / feature grid — --wg1 (set inline per card) tints the wash, border and
   icon, the same recipe as .mt-card/.cm-card, so this grid reads as the same
   family as the rest of the page instead of the flat, motion-less version it
   used to be. */
/* forced 4-up (not auto-fit) so the row stays one line beside the sidebar
   banner instead of wrapping the 4th card down — cards shrink to fit rather
   than the grid dropping to 2+1 (Rohit, 12-Aug: "ek line mein dekha") */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.why {
  padding: 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--wg1, var(--brand)) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--wg1, var(--brand)) 16%, var(--border));
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.why:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--wg1, var(--brand)) 34%, transparent); }
.why .ico-tile {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--wg1, var(--brand)) 14%, transparent); margin-bottom: 10px;
  transition: transform .22s var(--ease);
}
.why:hover .ico-tile { transform: scale(1.08) rotate(-4deg); }
.why .ico-tile .ico { width: 18px; height: 18px; color: var(--wg1, var(--brand)); }
.why h3 { margin: 0 0 5px; font-size: 14px; letter-spacing: -.008em; line-height: 1.3; }
.why p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 1180px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } .why { padding: 20px; } .why h3 { font-size: 16px; } .why p { font-size: 14px; } .why .ico-tile { width: 40px; height: 40px; margin-bottom: 14px; } .why .ico-tile .ico { width: 20px; height: 20px; } }
@media (max-width: 560px)  { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* the trailing "why it's built this way" copy — three icon-led rows in one
   card instead of a bare, unstyled paragraph block floating under the grid. */
.story-card {
  margin: var(--s6) auto 0; padding: 8px 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.story-row { display: flex; gap: 20px; padding: 28px 0; }
.story-row + .story-row { border-top: 1px solid var(--border); }
.story-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.story-ico .ico { width: 20px; height: 20px; }
.story-row h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink); }
.story-row p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.story-row strong { color: var(--ink); }
@media (max-width: 640px) {
  .story-card { padding: 4px 20px; }
  .story-row { flex-direction: column; gap: 12px; }
  .story-ico { transform: scale(.9); transform-origin: left; }
}

.stat-strip {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none;
}
.stat-strip li, .stat-strip span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; color: var(--ink-2);
}
.stat-strip b { color: var(--ink); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   COMPARISON
   ═══════════════════════════════════════════════════════════════════════ */
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: stretch; margin: var(--s3) 0 var(--s4); }
.vs-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.vs-card:hover { text-decoration: none; border-color: var(--border-2); box-shadow: var(--sh-2); }
.vs-card .app-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 15px; font-size: 21px; }
.vs-card h3 { margin: 0 0 4px; font-size: 17px; }
.vs-card .app-vendor { margin-bottom: 12px; }
.vs-mark {
  align-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); font-weight: 750; font-size: 13px;
  color: var(--ink-3); letter-spacing: .04em;
}
@media (max-width: 660px) { .vs-head { grid-template-columns: minmax(0, 1fr); } .vs-mark { width: 40px; height: 40px; } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--s4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { background: var(--surface-2); font-size: 15px; font-weight: 700; color: var(--ink); }
.cmp thead th:first-child { width: 160px; }
/* header cells must sit over the centred value cells they label */
.cmp thead th:not(:first-child) { text-align: center; }
.cmp tbody th { font-weight: 600; color: var(--ink-3); font-size: 14px; }
.cmp td { text-align: center; color: var(--ink-2); }
.cmp .yes { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 650; }
.cmp .no  { color: var(--ink-3); }

.link-cols { columns: 2; column-gap: var(--s5); padding-left: 20px; }
@media (max-width: 640px) { .link-cols { columns: 1; } }
.link-cols li { margin-bottom: 8px; break-inside: avoid; }

/* ════════════════════════════════════════════════════════════════════════
   FREE-ALTERNATIVES CARDS
   ═══════════════════════════════════════════════════════════════════════ */
/* ── community panels: latest requirements / recent discussions ────────────
   Two bordered panels, each a header row over hairline-separated entries. */
.cq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cq-panel {
  padding: 20px 22px 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cq-panel:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.cq-head { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.cq-head h2 { margin: 0; font-size: 17px; letter-spacing: -.018em; }
.cq-head .more { margin-left: auto; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cq-head .more .arw { transition: transform .18s var(--ease); }
.cq-head .more:hover .arw { transform: translateX(3px); }

.cq-list { display: flex; flex-direction: column; }
.cq-row {
  display: flex; align-items: flex-start; gap: 13px; padding: 15px 0;
  color: var(--ink); border-top: 1px solid var(--border);
}
.cq-row:first-child { border-top: 0; }
a.cq-row { transition: transform .18s var(--ease); }
a.cq-row:hover { text-decoration: none; transform: translateX(3px); }
a.cq-row:hover b { color: var(--brand-ink); }

/* round letter avatar (requirements) / rounded-square glyph (discussions) */
.cq-av, .cq-ico {
  flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center;
  color: #fff; font-weight: 750; font-size: 14px; letter-spacing: -.02em;
}
.cq-av { border-radius: 50%; background: var(--av, var(--brand)); }
.cq-ico { border-radius: 10px; background: var(--tn, var(--brand)); }
.cq-ico .ico { width: 18px; height: 18px; color: #fff; }

.cq-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cq-body b { font-size: 14.5px; font-weight: 650; line-height: 1.4; letter-spacing: -.01em; transition: color .16s var(--ease); }
.cq-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-3); }
.cq-meta .ico { width: 14px; height: 14px; flex: 0 0 14px; }
.cq-who, .cq-when { display: inline-flex; align-items: center; gap: 5px; }
.cq-tag {
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 650;
  background: color-mix(in srgb, var(--tg, var(--brand)) 12%, transparent);
  color: var(--tg, var(--brand));
}
.cq-topic { font-weight: 650; color: var(--tn, var(--brand)); }

/* honest empty state — see data/community.js for why these ship empty */
.cq-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 20px 0 24px; }
.cq-empty p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.cq-empty p b { color: var(--ink-2); font-weight: 650; }
.cq-empty .btn { gap: 7px; }
.cq-empty .btn .arw { transition: transform .18s var(--ease); }
.cq-empty .btn:hover .arw { transform: translateX(3px); }

@media (max-width: 860px) { .cq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) {
  /* the "View all …" link cannot shrink (nowrap), so below this it sits
     under the heading rather than pushing the panel past the screen */
  .cq-head { flex-wrap: wrap; }
  .cq-head .more { margin-left: 0; }
}

/* ── "More than a software directory" ──────────────────────────────────────
   Four tinted routes into the site: mark beside the heading, one line of copy,
   coloured pill CTA. --tint drives the wash and the mark, --cta the button. */
.mt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mt-card {
  display: flex; flex-direction: column; padding: 20px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tint, var(--brand)) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tint, var(--brand)) 16%, transparent);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.mt-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--tint, var(--brand)) 34%, transparent);
}
.mt-head { display: flex; align-items: flex-start; gap: 13px; flex: 1; margin-bottom: 16px; }
.mt-ico { flex: 0 0 34px; color: var(--tint, var(--brand)); transition: transform .22s var(--ease); }
.mt-ico .ico { width: 34px; height: 34px; stroke-width: 1.7; }
.mt-card:hover .mt-ico { transform: scale(1.08) rotate(-4deg); }
.mt-card h3 { margin: 0 0 5px; font-size: 15px; letter-spacing: -.015em; line-height: 1.25; }
.mt-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.mt-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--cta, var(--brand)); color: #fff;
  font-size: 13px; font-weight: 650; letter-spacing: -.005em;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--cta, var(--brand)) 35%, transparent);
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.mt-btn:hover { text-decoration: none; color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.mt-btn .arw { transition: transform .18s var(--ease); }
.mt-card:hover .mt-btn .arw { transform: translateX(3px); }

@media (max-width: 1040px) { .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mt-grid { grid-template-columns: minmax(0, 1fr); } }

/* "More than a directory" + "Why use FreeSoftwareX?" (just those two grids —
   the long story-card sits below, full width, outside this row) share one
   row with a sticky "Promote Your Business" banner in the right column
   (Rohit, 12-Aug: his own ready-made banner image, kept small and plain
   rather than rebuilt as a text+photo card). .mw-side reuses the site's
   existing .sticky utility (same one the software-page download card uses). */
.mw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--s5); align-items: start; margin-bottom: var(--s5); }
.mw-why-head { margin-top: var(--s6); }

.biz-promo {
  display: block; overflow: hidden; border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.biz-promo:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.biz-promo-img { display: block; width: 100%; height: auto; }

@media (max-width: 980px) {
  .mw-layout { grid-template-columns: minmax(0, 1fr); }
  .mw-side.sticky { position: static; }
  .biz-promo { max-width: 340px; margin: 0 auto; }
}

/* ── paid → free swap cards (homepage) ─────────────────────────────────────
   Tinted header carrying the paid product, an arrow, then a white panel of its
   real free replacements split by hairline dividers. --g1/--g2 are the
   category's gradient stops, set inline by the generator. */
.swap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swap {
  display: flex; flex-direction: column; padding: 16px 14px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--g1, var(--brand)) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--g1, var(--brand)) 18%, transparent);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.swap:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--g1, var(--brand)) 34%, transparent); }

.swap-paid { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink); }
.swap-paid:hover { text-decoration: none; color: var(--brand-ink); }
.swap-paid b { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.swap-logo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff;
  font-size: 12px; font-weight: 750; letter-spacing: -.03em;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.14);
}
.swap-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
/* a real logo brings its own colour — drop the gradient plate under it */
.swap-logo:has(img) { background: none; box-shadow: none; }

.swap-arrow { display: grid; place-items: center; margin: 10px 0 12px; color: var(--ink-3); }
.swap-arrow .ico { width: 17px; height: 17px; }
/* the arrow nudges down on hover — the whole point of the card in one gesture */
.swap:hover .swap-arrow .ico { transform: translateY(3px); }
.swap-arrow .ico { transition: transform .22s var(--ease); }

.swap-frees {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  background: var(--surface); border-radius: 12px; padding: 15px 0;
  box-shadow: var(--sh-1);
}
.swap-free {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  padding: 4px 6px; color: var(--ink); min-width: 0;
}
.swap-free + .swap-free { border-left: 1px solid var(--border); }
.swap-free:hover { text-decoration: none; }
.swap-free .app-ico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px; font-size: 15px;
  transition: transform .2s var(--ease);
}
.swap-free:hover .app-ico { transform: translateY(-2px) scale(1.08); }
.swap-free b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.swap-free:hover b { color: var(--brand-ink); }
/* pinned to the bottom of the (equal-height) cell so the roles line up across
   the row even when one name wraps to two lines */
.swap-free i { margin-top: auto; font-style: normal; font-size: 10.5px; color: var(--ink-3); line-height: 1.25; }

@media (max-width: 1040px) { .swap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .swap-grid { grid-template-columns: minmax(0, 1fr); } }

.alt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); gap: var(--s2); }
.alt-card {
  display: flex; flex-direction: column; padding: 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); color: var(--ink); box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.alt-card:hover { text-decoration: none; border-color: var(--border-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.alt-card h3 { margin: 0 0 4px; font-size: 15.5px; }
.alt-sub { flex: 1; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field .req { color: #b42318; margin-left: 2px; }
.field .help { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.input, .textarea, .select {
  width: 100%; min-height: 46px; padding: 11px 13px; font: 400 15px/1.5 var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-ctl); outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea { min-height: 118px; resize: vertical; }
.select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* :user-invalid, not :invalid — a required field that is merely still empty
   must not be painted red before the visitor has typed anything or submitted */
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: #d92d20; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
@media (max-width: 700px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 120;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px);
  padding: 13px 18px; background: var(--ink); color: #fff; border-radius: var(--r-ctl);
  font-size: 14.5px; box-shadow: var(--sh-3); opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast .ico { color: #6ee7b7; }

/* ════════════════════════════════════════════════════════════════════════
   PROMOTION / SPONSORED  (labelled, never disguised as organic)
   ═══════════════════════════════════════════════════════════════════════ */
.sponsor-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(154,91,0,.22);
}
.is-sponsored { border-color: rgba(154,91,0,.32); background: #fffdf8; }
/* call-to-action banner (homepage foot, categories index, promote page).
   Was a dashed outline box with the buttons as loose flex children — it read
   as an unfinished placeholder next to the tinted cards the rest of the page
   now uses, and the two buttons wrapped independently at narrow widths. Now a
   real card: brand wash, icon tile, and the actions grouped so they stay
   together and go full-width as a pair on mobile. */
.promo-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 26px; margin: var(--s4) 0; border-radius: var(--r-card);
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.promo-banner:hover { border-color: var(--brand); box-shadow: var(--sh-2); }
.promo-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  transition: transform .22s var(--ease);
}
.promo-ico .ico { width: 22px; height: 22px; }
.promo-banner:hover .promo-ico { transform: scale(1.07) rotate(-5deg); }
.promo-banner .promo-body { flex: 1 1 300px; min-width: 0; }
.promo-banner h3 { margin: 0 0 5px; font-size: 17.5px; letter-spacing: -.018em; }
.promo-banner p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.promo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .promo-banner { padding: 22px; }
  .promo-actions { width: 100%; }
  .promo-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* compact full-width CTA strip (Mayank, 22-Aug) — replaces the old
   "Featured service" card below with a short single-band bar. */
.cta-strip {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 22px);
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.6vw, 28px);
  border-radius: 14px; margin: var(--s4) 0;
  background: linear-gradient(135deg, #0d60ed 0%, #0a4bc4 100%);
}
.cta-strip-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16);
}
.cta-strip-ico .ico { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.8; }
.cta-strip-copy { flex: 1 1 260px; min-width: 0; }
.cta-strip-copy h2 { margin: 0 0 2px; font-size: 16.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.cta-strip-copy p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.cta-strip-btn {
  flex: 0 0 auto; padding: 10px 18px; border: 0; border-radius: 9px;
  background: #fff; color: #0a4bc4; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cta-strip-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
@media (max-width: 620px) { .cta-strip { flex-wrap: wrap; } .cta-strip-btn { width: 100%; } }

/* homepage "featured service" strip, under Popular software this week
   (Rohit, 12-Aug, matched to his reference screenshot) — a light sibling to
   the dark hero slider's Sunlite-services pitch, using the same brand-wash
   card recipe as .promo-banner above rather than a one-off. */
.feat-svc {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 40px);
  margin: var(--s4) 0; border-radius: var(--r-card);
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: var(--sh-1);
}
.feat-svc-copy { flex: 1 1 320px; min-width: 0; }
.feat-svc-eyebrow {
  display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.feat-svc h2 { margin: 0 0 8px; font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.02em; }
.feat-svc h2 em { font-style: normal; color: var(--brand-ink); }
.feat-svc-copy p { margin: 0 0 var(--s3); font-size: 15px; color: var(--ink-2); }
.feat-svc-img {
  flex: 1 1 320px; max-width: 420px; width: 100%; height: auto;
  aspect-ratio: 2008 / 783; object-fit: cover; border-radius: 14px;
}
@media (max-width: 700px) {
  .feat-svc { flex-direction: column; text-align: center; }
  .feat-svc-img { order: -1; max-width: none; }
  .feat-svc-copy .btn { margin: 0 auto; }
}

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s2); }
.price-card { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.price-card h3 { margin: 0 0 6px; font-size: 18px; }
.price-card .what { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.price-card li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 14px; color: var(--ink-2); }
.price-card li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' 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") no-repeat center;
}

/* ════════════════════════════════════════════════════════════════════════
   ADS  (AdSense policy: labelled only when filled, never near CTAs)
   ═══════════════════════════════════════════════════════════════════════ */
.ad { margin: var(--s4) 0; }
.ad:empty { margin: 0; }
.ad:has(iframe), .ad:has(ins) { margin: var(--s5) 0; padding-top: 20px; border-top: 1px solid var(--border); }
.ad:has(iframe)::before, .ad:has(ins)::before {
  content: 'Advertisement'; display: block; margin-bottom: 8px; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center;
}
.row-cta + .ad, .card + .ad { margin-top: var(--s6); }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
/* ── footer ────────────────────────────────────────────────────────────────
   A dark band in BOTH themes, per the reference: it closes the page off, and
   keeping it fixed means the footer doesn't restyle itself under the theme
   toggle. Colours are literal rather than var()-driven for that reason. */
.site-foot {
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 55%, #eef4ff 100%); color: var(--ink-2);
  padding: var(--s6) 0 var(--s3); margin-top: var(--s7);
  border-top: 1px solid var(--border);
}
.foot-grid { display: grid; grid-template-columns: 1.9fr repeat(4, 1fr); gap: var(--s4) var(--s3); }
/* h2, not h4 — the footer column labels sit after main content headings, and
   jumping h2→h4 breaks heading order for screen-reader navigation. Styled
   down to a label rather than sized by its level. */
.foot-grid h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink); margin: 0 0 16px; font-weight: 750; letter-spacing: -.005em; }
.foot-col-ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fc, var(--brand)) 14%, transparent); color: var(--fc, var(--brand));
}
.foot-col-ico .ico { width: 15px; height: 15px; stroke-width: 1.9; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13.5px; transition: color .15s var(--ease); }
.foot-grid a:hover { color: var(--brand-ink); text-decoration: none; }
.foot-chev { width: 13px; height: 13px; stroke-width: 2.2; color: var(--ink-3); flex: 0 0 auto; }
.foot-blurb { font-size: 14px; color: var(--ink-2); max-width: 34ch; margin: 16px 0 0; line-height: 1.65; }

.foot-social { display: flex; gap: 10px; margin-top: 20px; }
.soc {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink-2); border: 1px solid var(--border); box-shadow: var(--sh-1);
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.soc:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.soc-website:hover { background: var(--brand); border-color: var(--brand); }
.soc-x:hover        { background: #000; border-color: #000; }
.soc-github:hover   { background: #24292f; border-color: #24292f; }
.soc-mail:hover     { background: #ea580c; border-color: #ea580c; }
.soc .ico { width: 17px; height: 17px; stroke-width: 1.8; }
.sico { width: 17px; height: 17px; fill: currentColor; stroke: none; }

.foot-bottom {
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px var(--s2); align-items: center;
  font-size: 13.5px; color: var(--ink-3);
}
.foot-copy { display: inline-flex; align-items: center; gap: 8px; }
.foot-copy .ico { width: 15px; height: 15px; stroke-width: 1.8; color: var(--brand-ink); }
.foot-bottom .spacer { margin-left: auto; }
.foot-bottom a { color: var(--ink-3); }
.foot-made { display: inline-flex; align-items: center; gap: 6px; }
.heart-mark { width: 15px; height: 15px; fill: #f43f5e; stroke: #f43f5e; }
@media (max-width: 940px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-bottom .spacer { display: none; }
}

/* ── all-software A–Z index ────────────────────────────────────────────── */
.az-jump { margin-bottom: var(--s4); }
.az-jump .lchip { min-width: 44px; justify-content: center; font-weight: 700; }
.az-group { margin-bottom: var(--s4); }
.az-group h2 {
  font-size: 15px; font-weight: 700; color: var(--brand-ink); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--head-h) + 20px);
}
.az-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.az-list a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.az-list a:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--sh-1); transform: translateY(-1px); }
.az-list .app-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; font-size: 12px; }
.az-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.az-body b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.az-body i { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════════════ */
.disclose { font-size: 12.5px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 12px 15px; margin: 0 0 var(--s3); }
.empty {
  text-align: center; padding: var(--s6) var(--s3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); color: var(--ink-3);
}
.empty h3 { margin: 0 0 6px; color: var(--ink); }
.empty p { margin: 0 auto 18px; max-width: 46ch; }
.skeleton {
  height: 92px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface);
  position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(16,24,40,.05), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.scroll-lock { overflow: hidden; }

@media print {
  .site-head, .site-foot, .ad, .row-cta, .sk, .drawer, .scrim { display: none !important; }
  body { background: #fff; }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — honour the OS setting completely
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .cat-card:hover, .app-card:hover, .alt-card:hover { transform: none; }
  .app-card:hover .app-ico, .app-card:hover .app-view .arw { transform: none; }
  .reveal, .reveal.in { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME — driven by the sun/moon switch in the header.
   Opt-in and remembered in localStorage; light stays the default, so the
   content pages keep the light-theme design unless a visitor asks otherwise.
   Only the tokens change — no component needs a dark-specific rule beyond
   the handful of exceptions below.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0b0e24;
  --surface:     #151a3a;
  --surface-2:   #1c2249;
  --border:      #262c55;
  --border-2:    #3a4275;

  --ink:         #eef1fa;
  --ink-2:       #c2c8e0;
  --ink-3:       #9aa2c4;

  --brand:       #8b5cf6;
  --brand-ink:   #b9a6fd;
  --link:        #b9a6fd;   /* #8b5cf6 only reaches 4.5:1 on the dark page */
  --brand-soft:  #221a4d;
  --brand-line:  #3c327a;
  --accent:      #22d3ee;
  --accent-soft: #10283a;

  --ok:          #34d399;
  --ok-soft:     #10312a;
  --warn:        #fbbf24;
  --warn-soft:   #2e2308;

  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 2px 8px rgba(0,0,0,.40), 0 10px 28px rgba(0,0,0,.30);
  --sh-3: 0 10px 34px rgba(0,0,0,.55);
}

/* text tuned for light surfaces has to flip to its lightened twin */
/* white on #8b5cf6 is 4.23:1 — the filled button needs a deeper violet than
   the link hue, so the two are set independently in dark mode */
[data-theme="dark"] .btn { background: #7c3aed; border-color: #7c3aed; }
[data-theme="dark"] .btn:hover { background: #6d28d9; border-color: #6d28d9; }
[data-theme="dark"] .field .req { color: #ff9a92; }
[data-theme="dark"] .badge { color: var(--lc-d, var(--brand-ink)); }
/* the hero's category hue must swap to its lifted variant — the light-theme
   value only clears 4.5:1 against white, not against the dark surface */
[data-theme="dark"] .cat-hero { --ch: var(--ch-d); }
[data-theme="dark"] .fchip button:hover { background: rgba(185, 166, 253, .18); }
[data-theme="dark"] .c-ico { color: var(--cc-d, var(--brand)); }
[data-theme="dark"] .app-ico { box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06); }
/* the hero's ambient wash is hand-tuned for a white page — on the dark
   surface it needs its own recipe, not just the swapped CSS vars */
[data-theme="dark"] .hero {
  background:
    radial-gradient(58% 78% at 88% 18%, rgba(139,92,246,.22) 0%, transparent 62%),
    radial-gradient(46% 70% at 12% 4%,  rgba(34,211,238,.14) 0%, transparent 60%),
    linear-gradient(180deg, #10143a 0%, var(--bg) 100%);
}

[data-theme="dark"] .section-alt { background: var(--surface); }
[data-theme="dark"] .site-foot { background: #0f1a33; }
[data-theme="dark"] .toast { background: #262c55; }
[data-theme="dark"] .promo-banner { border-color: var(--brand-line); }
[data-theme="dark"] .is-sponsored { background: #241d0e; }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
[data-theme="dark"] .sortsel, [data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa2c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .row-feats li::before {
  background-color: var(--ok-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .price-card li::before {
  background-color: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23b9a6fd' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ══ homepage hero (Rohit's reference, 21-Aug-2026) ═════════════════════════
   Left: pitch → search → three entry points → stat strip. Right: a promo
   carousel. Replaces the old full-bleed banner slider; every class here is
   `hx-` prefixed so nothing collides with the .hero/.promo rules above, which
   stay put (other pages still use .hero).

   Motion budget: one entrance per element (staggered via an inline --d), slow
   ambient drift on the background blobs, a pointer-driven tilt on the device
   mock, and the carousel crossfade. All of it collapses under
   prefers-reduced-motion at the bottom of this block. */
/* ── hero v3 (Mayank, 21-Aug) ────────────────────────────────────────────────
   Marketplace-style three-up: a Services rail, one large ad card, two
   stacked small ad cards. Replaces the search/stats hero — the .hx-* rules
   below stay put (unused for now, cheap to bring back) since nothing else
   references them. */
.hx3 {
  position: relative; overflow: hidden;
  padding: clamp(20px, 2.6vw, 36px) 0;
  background: linear-gradient(180deg, #fbfaff 0%, #f7f8fd 62%, var(--bg) 100%);
}
.hx3-grid {
  display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 2.3fr) minmax(220px, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.hx3-services {
  display: flex; flex-direction: column; min-width: 0; max-height: 360px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; box-shadow: var(--sh-1);
}
.hx3-services-h {
  margin: 0; padding: 11px 14px; font-size: 14px; font-weight: 700; letter-spacing: -.005em;
  color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--border);
}
.hx3-services-list {
  list-style: none; margin: 0; padding: 6px 6px 6px 8px;
  display: flex; flex-direction: column; gap: 1px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.hx3-services-list a {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 540; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.hx3-services-list a:hover, .hx3-services-list a:focus-visible {
  background: var(--surface-2); color: var(--brand); text-decoration: none;
}
.hx3-services-list .ico { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.8; color: var(--ink-3); }
.hx3-services-list a:hover .ico, .hx3-services-list a:focus-visible .ico { color: var(--brand); }

.hx3-main, .hx3-side { min-width: 0; }
.hx3-main { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); }
.hx3-side { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }

/* the two side banners — unchanged from before */
.hx3-banner-card {
  display: block; position: relative; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 20px 50px rgba(15, 12, 40, .16), 0 4px 14px rgba(15, 12, 40, .08);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1);
}
.hx3-banner-card:hover, .hx3-banner-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px rgba(15, 12, 40, .22), 0 8px 20px rgba(15, 12, 40, .12);
}
/* object-fit:contain — this card's own rounded edges/text must never be
   cropped by the stretch frame (Mayank, 22-Aug) */
.hx3-banner-card img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fdfdfd; }
.hx3-banner-small { flex: 1 1 0; min-height: 0; }

/* banner slider — plain, matching the reference: no card shadow or hover
   lift, just the slides, a crossfade, and two always-visible arrows */
.hx3-slider { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.hx3-slides { display: grid; aspect-ratio: 801 / 352; }
.hx3-slide {
  grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.hx3-slide.is-active { opacity: 1; visibility: visible; }
.hx3-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx3-arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border); color: #4a1ffd; cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 12, 40, .14);
}
.hx3-arrow:hover { background: #fff; }
.hx3-prev, .pb-prev { left: 10px; }
.hx3-next, .pb-next { right: 10px; }
.hx3-arrow .ico { width: 17px; height: 17px; stroke-width: 2.4; }

/* tab row under the slider — fills the gap left by the slider's shorter
   ratio, matching the reference's blue tab bar (Mayank, 21-Aug) */
.hx3-tabs {
  display: flex; flex: 1 1 auto; min-height: 44px; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 8px; box-shadow: var(--sh-1);
}
.hx3-tab {
  flex: 1 1 0; display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 10px; background: var(--surface-2); color: var(--ink);
  font-size: 11.5px; font-weight: 700; line-height: 1.25;
  border-radius: 10px; border: 1px solid var(--border);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.hx3-tab:hover, .hx3-tab:focus-visible {
  background: var(--surface); border-color: var(--border-2); color: var(--ink);
  text-decoration: none; transform: translateY(-1px);
}
.hx3-tab-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, #0064fd 12%, transparent); color: #0064fd;
}
.hx3-tab-ico .ico { width: 17px; height: 17px; stroke-width: 2; }
.hx3-tab-ico-img { background: none; overflow: hidden; }
.hx3-tab-ico-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hx3-tab.is-active .hx3-tab-ico-img { background: none; }
.hx3-tab.is-active {
  background: linear-gradient(155deg, #0b1a4d 0%, #021633 100%); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(2, 22, 51, .35), inset 0 -3px 0 #00c2f5;
}
.hx3-tab.is-active:hover { background: linear-gradient(155deg, #0b1a4d 0%, #021633 100%); transform: none; }
.hx3-tab.is-active .hx3-tab-ico { background: rgba(255, 255, 255, .14); color: #fff; }
/* below this width, 4 equal-flex tabs get crushed too thin to read —
   switch to fixed-width horizontal scroll instead (Mayank, 22-Aug mobile fix) */
@media (max-width: 620px) {
  .hx3-tabs { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .hx3-tab { flex: 0 0 auto; width: 172px; }
}

/* "New Enquiry" strip — a green stats card the width of the Services
   column, then a fast auto-scrolling row of enquiry cards, mirroring
   authoriseddealer.com's layout (Mayank, 21-Aug). Seamless CSS-only loop:
   two identical card groups side by side, scrolled left by exactly 50%. */
.hx3-enq-row {
  display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
.hx3-enq-stats {
  flex: 0 0 auto; width: 220px; min-width: 200px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 16px 18px; border-radius: 10px;
  background: linear-gradient(155deg, #00c2f5 0%, #4a1ffd 100%); color: #fff;
}
.hx3-enq-stats b { font-size: 14px; font-weight: 700; }
/* #enqCount/#visitCount count up from 0 on load (fsx.js), then keep ticking
   forever. The digit count growing mid-animation used to shift where the
   "Enquiries Received :" text wraps inside the fixed-width box, flipping it
   between 1 and 2 lines dozens of times a second — THAT was the page-wide
   "vibrate" (confirmed via a real layout-shift trace, 26-Aug), not the
   scroll-reveal removed earlier. Reserving the counter's final width stops
   the wrap point from moving at all. */
#enqCount, #visitCount { display: inline-block; min-width: 6ch; font-variant-numeric: tabular-nums; }
.hx3-enq-btn {
  margin-top: 4px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: 7px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 13px; font-weight: 650;
  transition: background .18s var(--ease);
}
.hx3-enq-btn:hover { background: rgba(255, 255, 255, .26); text-decoration: none; }

.hx3-enq-track {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
}
.hx3-enq-track::before, .hx3-enq-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none;
}
.hx3-enq-track::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.hx3-enq-track::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.hx3-enq-scroll { display: flex; height: 100%; width: max-content; animation: hx3-enq-scroll 34s linear infinite; }
@keyframes hx3-enq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hx3-enq-cards { display: flex; flex: 0 0 auto; height: 100%; }
.hx3-enq-card {
  flex: 0 0 auto; width: 220px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--border);
}
.hx3-enq-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.hx3-enq-tag i { width: 7px; height: 7px; border-radius: 50%; background: #00c2f5; flex: 0 0 7px; }
.hx3-enq-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); flex: 1 1 auto; }
.hx3-enq-contact {
  align-self: flex-start; padding: 6px 12px; border-radius: 6px; background: #0064fd; color: #fff;
  font-size: 12.5px; font-weight: 650; transition: background .18s var(--ease);
}
.hx3-enq-contact:hover { background: #4a1ffd; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .hx3-enq-scroll { animation: none; } }
@media (max-width: 780px) { .hx3-enq-row { flex-direction: column; } .hx3-enq-stats { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* ── Trending Solutions carousel (replaces "Recently reviewed") ─────────── */
.ts-wrap { position: relative; }
.ts-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 10px; scrollbar-width: none;
}
.ts-track::-webkit-scrollbar { display: none; }
.ts-card {
  scroll-snap-align: start; flex: 0 0 auto; width: 220px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ts-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.ts-tag {
  align-self: center; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.ts-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; margin: 2px 0; }
.ts-ico-img { background: var(--surface-2); border: 1px solid var(--border); padding: 8px; }
.ts-ico-img img { width: 100%; height: 100%; object-fit: contain; }
.ts-ico .ico { width: 24px; height: 24px; stroke-width: 1.8; color: #fff; }
.ts-name { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.ts-name a { color: var(--ink); }
.ts-name a:hover { color: var(--brand); text-decoration: none; }
.ts-by { font-size: 12.5px; color: var(--ink-3); }
.ts-rating { font-size: 13px; color: var(--ink-2); }
.ts-rating b { color: #d97706; margin-right: 4px; font-weight: 700; }
.ts-rating i { font-style: normal; color: var(--ink-3); }
.ts-price { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; color: var(--ink); }
.ts-price i { order: -1; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 1px; }
.ts-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; align-self: stretch; }
.ts-btn { flex: 1 1 0; text-align: center; padding: 9px 6px; border-radius: 8px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.ts-btn-outline { border: 1px solid var(--border-2); color: var(--ink); }
.ts-btn-outline:hover { background: var(--surface-2); text-decoration: none; }
.ts-btn-solid { background: #0284c7; color: #fff; }
.ts-btn-solid:hover { background: #0369a1; text-decoration: none; }
.ts-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(15, 12, 40, .14);
  cursor: pointer; color: var(--ink-2);
}
.ts-prev { left: -6px; }
.ts-next { right: -6px; }
.ts-arrow .ico { width: 17px; height: 17px; stroke-width: 2.4; }
@media (max-width: 560px) { .ts-arrow { display: none; } }

/* ── Grow With Us — real partner programs, not third-party affiliate deals ── */
.gw-band { background: linear-gradient(135deg, #0284c7 0%, #112f57 100%); border-radius: 18px; padding: clamp(18px, 2.4vw, 26px); }
.gw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.gw-head h2 { color: #fff; margin: 0 0 4px; }
.gw-head .sub { color: rgba(255, 255, 255, .82); margin: 0; font-size: 13.5px; }
.gw-viewall { color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; }
.gw-viewall:hover { text-decoration: underline; }
.gw-grid { display: flex; gap: 14px; }
.gw-card {
  flex: 1 1 0; width: auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  background: #fff; border-radius: 12px; padding: 18px 16px; border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.gw-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: rgba(239,68,68,.4); }
.gw-ico { width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; }
.gw-ico .ico { width: 22px; height: 22px; stroke-width: 1.8; color: #fff; }
.gw-name { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.gw-by { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.gw-by em { font-style: normal; color: #0064fd; }
.gw-tagline { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
/* promo image on the Reseller Program card only — bleeds to the card's
   edges above the existing icon/name/tagline/button, which stay put below
   it (Mayank, 22-Aug); the card simply grows taller to fit it. */
.gw-promo-img { width: calc(100% + 32px); max-width: calc(100% + 32px); height: auto; margin: -18px -16px 2px; border-radius: 12px 12px 0 0; display: block; }
.gw-btn {
  margin-top: auto; width: 100%; box-sizing: border-box; text-align: center;
  padding: 8px; border-radius: 8px; background: #0284c7; color: #fff;
  font-size: 13.5px; font-weight: 650;
}
.gw-btn:hover { background: #0369a1; text-decoration: none; }
/* Reseller card: full-bleed banner image (no baked-in footer this time) with
   a real HTML navy strip below it — a "Become a Reseller" pill (links to
   contact.html) + 4 industry tags, matching the reference screenshot
   (Mayank, 26-Aug). Built as markup, not image, so the pill is a proper link
   and the tags stay legible at the card's narrow width (2x2, not 1x4). */
/* .gw-grid is a flex row with default align-items:stretch, so every card
   normally matches the tallest sibling's height. The other 4 cards are
   taller (icon+tagline+button stack), which was leaving blank white space
   under this card's banner+pill. align-self opts this one card out so its
   height hugs the banner exactly (Mayank, 26-Aug). */
.gw-card-banner { padding: 0; gap: 0; align-self: flex-start; }
/* Both banner cards (Reseller + Affiliate) share this class but their
   source images have different native aspect ratios (1122x1402 vs
   1003x1568) — force a common aspect + object-fit so the two cards render
   at the exact same size instead of drifting apart (Mayank, 26-Aug). */
.gw-card-banner .gw-promo-img { width: 100%; max-width: 100%; aspect-ratio: 1122 / 1402; object-fit: cover; object-position: top; margin: 0; border-radius: 12px 12px 0 0; display: block; }
/* This one image's important content (top eyebrow label + bottom wordmark
   and tagline) sits close to both edges, unlike the other 3 — top-anchored
   cropping was slicing the bottom wordmark off entirely. Center keeps both
   ends in frame (Mayank, 26-Aug: "text cut, highlight not showing"). */
.gw-card-banner .gw-obj-center { object-position: center; }
/* This reseller image crops much more (1024x1536, well off the shared
   1122x1402 box) — top-anchor would keep the "FreeSoftwareX Partner
   Network" wordmark but slice off the "Digital Catalog / Partner Support"
   badges at the very bottom entirely. Biasing the crop toward the top
   sacrifices that (redundant, shown elsewhere) wordmark instead and keeps
   the main headline + bottom badges fully in frame (Mayank, 26-Aug). */
.gw-card-banner .gw-obj-low { object-position: center 98%; }
/* Directory image's "3 Months Free"/"Manually Reviewed" badges sit close
   to the bottom crop line at the default top-anchor — nudge down slightly
   so both stay clear of the edge (Mayank, 26-Aug lesson applied proactively). */
.gw-card-banner .gw-obj-25 { object-position: center 25%; }
/* Promote-software image's "+38% reach this week" stat sits close to the
   bottom crop line too — same proactive margin fix. */
.gw-card-banner .gw-obj-17 { object-position: center 17%; }
.gw-reseller-strip {
  width: 100%; box-sizing: border-box;
  background: linear-gradient(160deg, #0a1a35 0%, #13294d 100%);
  border-radius: 0 0 12px 12px;
  padding: 12px 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.gw-reseller-pill {
  display: block; background: #fff; color: #0a1a35; text-align: center;
  font-weight: 800; font-size: 13px; letter-spacing: .01em;
  padding: 10px 8px; border-radius: 999px; white-space: nowrap;
}
.gw-reseller-pill:hover { background: #e6f0ff; text-decoration: none; }
/* below this width, 5 equal-flex cards get crushed too thin to read (the
   button text was wrapping one letter per line) — switch to fixed-width
   horizontal scroll instead. Placed AFTER the base .gw-card/.gw-btn rules on
   purpose: the 22-Aug fix originally sat before them, so the later
   unconditional flex:1 1 0 rule always won on mobile and silently undid it
   (24-Aug fix). */
@media (max-width: 780px) {
  .gw-grid { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .gw-card { flex: 0 0 auto; width: 200px; scroll-snap-align: start; }
}

/* ════════════════════════════════════════════════════════════════════════
   Trending Solutions + Grow With Us — dark glass-morphism restyle
   (Mayank, 22-Aug: current cards read flat/cyan-blue, dev asked for
   glass-morphism + shadow hover + a dark/white/red mix, plus real
   animation instead of the .fx-aurora-bg/.fx-reveal/.fx-magnetic hooks
   that shipped with no CSS/JS behind them). Cards now use translucent
   frosted glass with a red glow on hover; aurora blobs sit behind them so
   the backdrop-blur actually has colour to refract.
   ═══════════════════════════════════════════════════════════════════════ */
#categories, #trending-solutions, #grow-with-us { position: relative; }
#categories > .wrap, #trending-solutions > .wrap, #grow-with-us > .wrap { position: relative; z-index: 1; }

.fx-aurora-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.fx-aurora-bg i {
  position: absolute; display: block; border-radius: 50%; filter: blur(70px);
  opacity: .5; will-change: transform; animation: fxAuroraDrift 20s ease-in-out infinite;
}
.fx-aurora-bg i:nth-child(1) { display: none; }
.fx-aurora-bg i:nth-child(2) {
  width: 380px; height: 380px; top: 10%; right: -140px; animation-delay: -7s;
  background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%);
}
.fx-aurora-bg i:nth-child(3) {
  width: 340px; height: 340px; bottom: -170px; left: 32%; animation-delay: -14s;
  background: radial-gradient(circle, rgba(14,116,144,.4), transparent 70%);
}
@keyframes fxAuroraDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-22px) scale(1.08); }
  66%      { transform: translate(-24px,18px) scale(.95); }
}

/* Scroll-reveal (opacity+translateY on scroll-into-view) was removed for
   good (Mayank, 26-Aug): it kept reading as a page-wide "shake/vibrate" on
   load across categories/trending-solutions/grow-with-us, and two rounds of
   tweaking (shorter slide, then fade-only on the banner cards) still didn't
   settle it. Cards are just visible now, no entrance animation. */
.fx-reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx-aurora-bg i { animation: none; }
}

/* 22-Aug follow-up (Mayank): the dark cards read too dark and the magnetic
   cursor-follow made cards "hilte" (jitter) on hover — pulled back to a
   light frosted glass with a red-tinted shadow doing the accent work
   instead, and hover is a plain lift again (no --mx/--my). */
.ts-card {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ts-card:hover {
  border-color: rgba(239,68,68,.4);
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(99,102,241,.28);
  transform: translateY(-4px);
}
/* .gw-card intentionally excluded here — matched to .pb-hcard's plain
   no-shadow-at-rest, shadow+lift-only-on-hover animation instead (Mayank,
   22-Aug), via its own base rule further up. */
.ts-tag { background: rgba(239,68,68,.12); color: #b91c1c; }

/* Trending Solutions — blue/purple/red spark travels the card's actual
   rectangular border on hover (Mayank, 22-Aug: a conic-gradient rotates in
   a circle around the card's centre, which reads as circular motion no
   matter the card's shape — this instead moves in straight lines corner
   to corner along the real edges via plain top/left percentages, so it
   traces the rectangle itself, not an ellipse around it). */
.ts-card { position: relative; overflow: hidden; }
.ts-card::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #a855f7, #ef4444);
  box-shadow: 0 0 12px 2px rgba(168,85,247,.55);
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; z-index: 2;
}
.ts-card:hover::before { opacity: 1; animation: tsSnakeLine 2.6s linear infinite; }
/* same traveling gradient line, now also on Grow With Us and the banner-
   strip cards (Mayank, 22-Aug) */
.gw-card, .pb-hcard { position: relative; overflow: hidden; }
.gw-card::before, .pb-hcard::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #a855f7, #ef4444);
  box-shadow: 0 0 12px 2px rgba(168,85,247,.55);
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; z-index: 2;
}
.gw-card:hover::before, .pb-hcard:hover::before { opacity: 1; animation: tsSnakeLine 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .gw-card:hover::before, .pb-hcard:hover::before { animation: none; }
}
@keyframes tsSnakeLine {
  0%   { top: 0%;   left: 0%;   transform: translate(-50%,-50%) rotate(0deg); }
  24%  { top: 0%;   left: 100%; transform: translate(-50%,-50%) rotate(0deg); }
  25%  { top: 0%;   left: 100%; transform: translate(-50%,-50%) rotate(90deg); }
  49%  { top: 100%; left: 100%; transform: translate(-50%,-50%) rotate(90deg); }
  50%  { top: 100%; left: 100%; transform: translate(-50%,-50%) rotate(180deg); }
  74%  { top: 100%; left: 0%;   transform: translate(-50%,-50%) rotate(180deg); }
  75%  { top: 100%; left: 0%;   transform: translate(-50%,-50%) rotate(270deg); }
  99%  { top: 0%;   left: 0%;   transform: translate(-50%,-50%) rotate(270deg); }
  100% { top: 0%;   left: 0%;   transform: translate(-50%,-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-card:hover::before { animation: none; }
}
/* matches the logo's blue→indigo gradient, with a slightly lifted hover
   (Mayank, 22-Aug) */
.ts-btn-solid, .gw-btn {
  background: linear-gradient(135deg, #0064fd, #4a1ffd);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ts-btn-solid:hover, .gw-btn:hover {
  background: linear-gradient(135deg, #2a7bff, #6c3cff);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(74, 31, 253, .32);
}

/* Trending Solutions carousel arrows — not needed, the track already
   scrolls by swipe/trackpad (Mayank, 22-Aug) */
.ts-arrow { display: none; }

.gw-band {
  position: relative; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.gw-head h2 { color: var(--ink); }
.gw-head .sub { color: var(--ink-2); }
.gw-viewall { color: var(--brand-ink); }

@media (max-width: 1080px) {
  .hx3-grid { grid-template-columns: 1fr; }
  .hx3-services { max-height: 320px; }
  .hx3-side { flex-direction: row; }
  .hx3-banner-small { aspect-ratio: 1575 / 999; flex: 1 1 0; }
}
@media (max-width: 620px) {
  .hx3-side { flex-direction: column; }
}

.hx {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 3.4vw, 52px) 0 clamp(24px, 3vw, 42px);
  background: linear-gradient(180deg, #fbfaff 0%, #f7f8fd 62%, var(--bg) 100%);
}
.hx-blob {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  filter: blur(46px); opacity: .55;
}
.hx-blob-1 {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; top: -14%; left: -8%;
  background: radial-gradient(circle, rgba(99,102,241,.30) 0%, transparent 68%);
  animation: hx-drift 22s ease-in-out infinite;
}
.hx-blob-2 {
  width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; bottom: -20%; left: 34%;
  background: radial-gradient(circle, rgba(168,85,247,.22) 0%, transparent 68%);
  animation: hx-drift 27s ease-in-out infinite reverse;
}
@keyframes hx-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, 5%, 0) scale(1.08); }
}

.hx-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 38px); align-items: center;
}

/* full-width ad strip, its own band between page sections — plain
   placement, no shadow/animation */
.hx-topbanner { padding: clamp(14px, 2vw, 24px) 0; }
.hx-topbanner-card {
  display: block; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 12, 40, .22), 0 4px 16px rgba(15, 12, 40, .1);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s cubic-bezier(.22, 1, .36, 1);
}
.hx-topbanner-card:hover, .hx-topbanner-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 32px 74px rgba(15, 12, 40, .28), 0 8px 20px rgba(15, 12, 40, .14);
}
/* was object-fit:cover at a fixed height — at wide viewports the frame ends up
   narrower (in ratio) than this banner's image, so cover crops the sides.
   Switched to contain + a shorter clamp so the whole banner always shows,
   never cropped, and shorter overall (Mayank, 8-Sep: "height kaam, side se
   cut ho raha hai") — same fix pattern already applied to #siteBanner above. */
.hx-topbanner-card img { display: block; width: 100%; height: clamp(70px, 8vw, 120px); object-fit: contain; background: #fdfdfd; }
/* this banner's own border/edges must never be cropped by cover's fixed-height
   frame — show the whole image instead (Mayank, 22-Aug) */
#siteBanner img { object-fit: contain; background: #fdfdfd; }

/* horizontal auto-scroll banner strip (left, big) + small banner (right) —
   taller again, cards with real borders, pauses on hover/touch
   (Mayank, 22-Aug). */
/* both columns size themselves from their own image aspect-ratio now, not
   a shared stretched height — stretch left blank space below the shorter
   one (Mayank, 22-Aug) */
.pb-row { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(200px, 1fr); gap: 16px; align-items: start; }
/* outer white panel (arrows + dots live here, unclipped) wraps an inner
   clipped viewport for the cards themselves — arrows sit just outside the
   card edges, in the panel's own padding (Mayank, 22-Aug) */
.pb-hslider {
  position: relative; padding: 18px 30px 12px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1);
}
.pb-hslider-clip { position: relative; overflow: hidden; border-radius: 14px; }
.pb-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); flex: 0 0 auto; }
.pb-dot.is-active { width: 20px; border-radius: 999px; background: #4a1ffd; }
.pb-hslider .pb-prev { left: 2px; }
.pb-hslider .pb-next { right: 2px; }
/* auto-scroll + manual arrow stepping is JS-driven now (Mayank, 22-Aug) —
   arrow click nudges by one card, pauses briefly, then auto-scroll resumes */
.pb-htrack { display: flex; width: max-content; }
.pb-hset { display: flex; align-items: center; gap: 12px; padding: 12px; flex: 0 0 auto; }
/* width is set from JS as --pbcard-w so exactly 3 cards are visible at any
   viewport size (Mayank, 22-Aug); height follows the banner images' own
   1521:1034 aspect-ratio instead of a fixed box, so cover never crops or
   letterboxes their content (Mayank, 22-Aug) */
.pb-hcard {
  flex: 0 0 auto; width: var(--pbcard-w, 300px); aspect-ratio: 1521 / 1034; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: #fff; box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pb-hcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: rgba(239,68,68,.4); }
.pb-hcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-prev, .pb-next { z-index: 3; }
/* standalone now — the slider it used to sit beside is gone, replaced by
   the Process section above it (Mayank, 22-Aug) */
.pb-banner { max-width: 900px; margin: 0 auto; aspect-ratio: 3506 / 448; display: block; }
/* object-fit:contain — this banner's own text/edges must never be cropped */
.pb-banner img { height: 100%; width: 100%; object-fit: contain; background: #fdfdfd; }

/* ── left column ─────────────────────────────────────────────────────────── */
@keyframes hx-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
.hx-title, .hx-sub, .hx-search, .hx-act, .hx-stats, .hx-promo {
  animation: hx-rise .72s var(--ease) both; animation-delay: var(--d, 0s);
}

.hx-title {
  margin: 0 0 9px; font-size: clamp(24px, 2.52vw, 34px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.032em; color: #111827; text-wrap: balance;
}
/* the accent half of the headline — solid indigo everywhere, with a slow
   gradient sweep where background-clip:text is supported */
.hx-hl { color: var(--brand); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hx-hl {
    background: linear-gradient(92deg, #4f46e5 0%, #7c3aed 42%, #4f46e5 84%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: hx-sweep 7s linear infinite;
  }
}
@keyframes hx-sweep { to { background-position: 260% 0; } }

.hx-sub {
  margin: 0 0 clamp(14px, 1.6vw, 19px); max-width: 44ch;
  font-size: 13.4px; line-height: 1.58; color: var(--ink-3);
}

/* search bar — one row: query · divider · category · submit tile */
.hx-search {
  position: relative; display: flex; align-items: center; gap: 0;
  padding: 6px 6px 6px 4px; margin: 0 0 clamp(14px, 1.6vw, 20px);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 13px; box-shadow: 0 6px 22px rgba(16,24,40,.07);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hx-search:focus-within {
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft), 0 8px 26px rgba(16,24,40,.09);
}
.hx-q {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 13px;
  background: none; border: 0; outline: 0; color: var(--ink);
  font: inherit; font-size: 14.5px;
}
.hx-q::placeholder { color: #98a2b3; }
.hx-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.hx-sep { width: 1px; height: 26px; flex: 0 0 1px; background: var(--border); }
.hx-cat-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.hx-cat {
  height: 42px; padding: 0 28px 0 13px; max-width: 160px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: none; border: 0; outline: 0; color: var(--ink-2);
  font: inherit; font-size: 13.5px; text-overflow: ellipsis;
}
.hx-cat-caret {
  position: absolute; right: 10px; width: 15px; height: 15px;
  color: var(--ink-3); pointer-events: none; stroke-width: 2.2;
}
.hx-go {
  flex: 0 0 auto; width: 42px; height: 42px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); border: 0; border-radius: 10px; color: #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(79,70,229,.35);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.hx-go:hover { background: var(--brand-ink); transform: translateY(-1px); }
.hx-go .ico { width: 19px; height: 19px; stroke-width: 2.2; }
.hx-search .results { text-align: left; top: calc(100% + 8px); }

/* three entry points */
.hx-acts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 0 0 clamp(12px, 1.4vw, 16px);
}
.hx-act {
  display: flex; align-items: center; gap: 8px; padding: 10px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  color: inherit; text-decoration: none; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.hx-act:hover {
  transform: translateY(-2px); border-color: var(--border-2);
  box-shadow: var(--sh-2); text-decoration: none;
}
.hx-act-ico {
  flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand);
  transition: transform .18s var(--ease);
}
.hx-act:hover .hx-act-ico { transform: scale(1.08) rotate(-4deg); }
.hx-act-b .hx-act-ico { background: #e8f1ff; color: #1d6fe0; }
.hx-act-c .hx-act-ico { background: #e6f7ee; color: #0f8a52; }
.hx-act-ico .ico { width: 17px; height: 17px; stroke-width: 1.9; }
.hx-act-txt { display: flex; flex-direction: column; min-width: 0; }
.hx-act-txt b {
  font-size: 12px; font-weight: 650; color: var(--ink); letter-spacing: -.016em;
  line-height: 1.3;
}
.hx-act-txt i { font-style: normal; font-size: 10.6px; line-height: 1.35; color: var(--ink-3); }

/* stat strip */
.hx-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--sh-1);
}
.hx-stats li {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-left: 1px solid var(--border);
}
.hx-stats li:first-child { border-left: 0; }
.hx-stat-ico {
  flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand);
}
.hx-stat-ico .ico { width: 16px; height: 16px; stroke-width: 1.9; }
.hx-stat-txt { display: flex; flex-direction: column; min-width: 0; }
.hx-stat-txt b {
  font-size: 15px; font-weight: 750; color: var(--ink); letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
}
.hx-stat-txt i { font-style: normal; font-size: 11.4px; color: var(--ink-3); }

/* ── right column: promo banner ──────────────────────────────────────────── */
.hx-promo {
  position: relative; --d: .34s;
  aspect-ratio: 16 / 10; min-height: 268px;
}
.hx-promo > a { display: block; height: 100%; }
.hx-banner-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* the assurance strip, now its own band under the hero */
.hx-trust { padding: 0 0 clamp(6px, 1vw, 12px); background: var(--bg); }
.hx-trust .trust { margin-top: 0; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-promo { order: 2; aspect-ratio: 16 / 8; min-height: 250px; }
  .hx-copy  { order: 1; }
  .hx-sub { max-width: none; }
}
@media (max-width: 760px) {
  .hx-acts { grid-template-columns: minmax(0, 1fr); }
  .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-stats li:nth-child(3) { border-left: 0; }
  .hx-stats li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hx-promo { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 560px) {
  .hx-search { flex-wrap: wrap; row-gap: 6px; padding: 8px; }
  .hx-q { flex: 1 0 100%; height: 40px; border-bottom: 1px solid var(--border); border-radius: 0; }
  .hx-sep { display: none; }
  .hx-cat-wrap { flex: 1 1 auto; }
  .hx-cat { max-width: none; width: 100%; height: 40px; padding-left: 4px; }
  .hx-go { width: 40px; height: 40px; }
}

/* motion is decoration here — every animation above is optional */
@media (prefers-reduced-motion: reduce) {
  .hx-title, .hx-sub, .hx-search, .hx-act, .hx-stats, .hx-promo,
  .hx-blob, .hx-hl {
    animation: none !important;
  }
}

/* ── brand bar (under the footer) ──────────────────────────────────────────
   A single full-width accordion bar flush inside the footer's dark band —
   click it and the whole list opens directly beneath it in place, so it
   reads as part of the footer rather than a card floating outside it.
   Colours match the reference bars: solid blue bar, white text, white list. */
.brand-bar {
  position: relative; background: #12203f; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  border-top: 0;
}
/* Full-bleed tape, matching the sunlitesystems.com bar Rohit sent (21-Aug-2026):
   edge to edge, no radius, no border, bold white text centred on #12203f —
   the colour Rohit specified (same as the band). Still the disclosure button
   for the brand list; it just wears the tape instead of a pill. */
.bb-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: none;
  padding: 10px 20px; border-radius: 0; cursor: pointer;
  background: #12203f; border: 0;
  color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-transform: none;
  transition: background .18s var(--ease);
}
.bb-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
/* No caret (Rohit, 21-Aug-2026): a plain "Free Software" button, not a
   dropdown-looking control. aria-expanded still exposes the state to assistive
   tech; open state reads via the darker fill. */
.bb-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.18); color: #fff; }
.bb-mark .ico { width: 15px; height: 15px; }

.bb-panel {
  width: 100%; max-width: min(var(--wrap), calc(100% - 40px)); margin: 12px auto 34px;
  background: #12203f; border: 0;
  border-radius: 0;
  overflow: hidden; animation: bb-in .18s var(--ease);
}
.bb-panel[hidden] { display: none; }
@keyframes bb-in { from { opacity: 0; } }

/* Audience switch (Mayank, 1-Sep-2026): sits above the Software/Buy Leads/…
   tab stack. India shows the existing tabs as-is; Global clears the area
   below to blank — there is no global content to show yet. */
.bb-audience { display: flex; gap: 10px; padding: 14px 14px 4px; }
.bb-aud-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: #cfd6e6; font: inherit; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.bb-aud-btn:hover { background: rgba(255,255,255,.1); }
.bb-aud-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bb-aud-btn.is-active {
  background: #2563eb; border-color: #2563eb; color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.45);
}
.bb-aud-flag {
  width: 24px; height: 24px; border-radius: 50%; flex: none; position: relative;
  background: linear-gradient(180deg, #FF9933 0 33%, #fff 33% 66%, #138808 66% 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset;
}
.bb-aud-flag::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: #0d47a1; transform: translate(-50%, -50%);
}
.bb-aud-globe { width: 21px; height: 21px; flex: none; }
.bb-audience-content[hidden] { display: none; }
/* The head is the SECOND level of the disclosure (Rohit, 21-Aug-2026): the panel
   opens showing only this "All brands" tab, and the tab expands the list below
   it. The whole bar is the hit target, so the button fills the head and the head
   itself carries no padding. The close button sits above it and still wins its
   own clicks (absolute + later in the DOM). */
.bb-panel-head {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0; background: none;
  margin-top: 8px;
}
.bb-panel-head h2 { margin: 0; width: 100%; }
.bb-group {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 26px; cursor: pointer;
  background: #2d4a8e; border: 0; border-radius: 0;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #fff;
  letter-spacing: .05em; text-transform: uppercase; text-align: center;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.bb-group:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.bb-panel-head h2 span {
  margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.2); color: #fff; font-size: 11.5px; font-weight: 650;
  text-transform: none; letter-spacing: normal;
}
.bb-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 9px; color: #cbd6ee; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.bb-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.bb-close .ico { width: 18px; height: 18px; }

/* One running line — "BRANDS : a | b | c" wrapping across as many rows as it
   needs — per Rohit's reference (21-Aug-2026). No grid, no category dots. */
.bb-list {
  display: block; padding: 14px 2px 6px;
  color: #cfd6e6; font-size: 13.5px; line-height: 2.05;
}
/* display:block would otherwise beat the `hidden` attribute */
.bb-list[hidden] { display: none; }
.bb-label {
  font-weight: 800; color: #fff; letter-spacing: .04em;
  text-transform: uppercase; margin-right: 4px;
}
.bb-item {
  color: #cfd6e6; text-decoration: none; white-space: nowrap;
  transition: color .14s var(--ease);
}
.bb-item:hover { color: #fff; }
.bb-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.bb-sep { color: #5d6d92; margin: 0 7px; }
/* Category sub-groups inside a single tab's list (Mayank, 1-Sep-2026) — each
   group repeats the same "LABEL : a | b | c" line, stacked with a gap between. */
.bb-lead-group { display: block; margin-top: 16px; }
.bb-lead-group:first-child { margin-top: 0; }
.bb-list button.bb-item { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }


/* ── software landing extras (hero banner, inline download, FAQ, keywords) ──
   Used by any program carrying an `seo` block in software.js. */

/* Full-bleed hero banner. Deliberately carries NO text overlay — Rohit's
   brief was a clear view — so it needs no contrast scrim and the artwork is
   never fighting a headline. Aspect-ratio matches the artwork's own pixel
   ratio (2048:682) at EVERY width, so object-fit:cover never actually crops
   anything — the whole banner stays visible, edge to edge, on any screen.
   The sheen + drop shadow give it a glass-panel lift above the page below,
   echoing the --sh elevation already used on cards elsewhere in this file. */
.sw-banner {
  position: relative; width: 100%; overflow: hidden; background: var(--surface-2);
  /* the banner is the ONE highlighted element on the page (Rohit's brief), so it
     carries the heaviest elevation here — everything below it is glass and sits
     visibly lower in the stack */
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--sh-3), 0 30px 60px -26px rgba(16,24,40,.55);
}
/* aspect-ratio is set inline per image from the file's real pixel size, so a
   banner is never cropped to a shape it was not drawn for; this is only the
   fallback for anything that arrives without it.

   Nothing is ever cropped. A banner squarer than the design shape cannot run
   full-bleed — it scales with the viewport, so 2:1 is 960px tall on a 1920px
   monitor, the entire screen before a word of content. Cropping it back was
   tried and rejected: these designs use their full height, so a centre crop
   cuts artwork (it sliced Discord's platform bar) rather than padding.
   .sw-banner-tall instead constrains the band to the content width, where the
   same image renders whole at roughly 600px. */
.sw-banner img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2048 / 682; object-fit: cover;
}
.sw-banner-tall {
  max-width: var(--wrap); margin: 0 auto; border-radius: var(--r-card);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--sh-2);
}
@media (max-width: 1240px) { .sw-banner-tall { margin: 0 20px; } }
.sw-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.1) 100%);
  mix-blend-mode: overlay;
}
/* a lit bottom edge, so the banner reads as a pane of glass the page slides
   under rather than a picture that simply stops */
.sw-banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

/* rotating hero banner used on the *-services.html pages — 3 slides in one
   .sw-banner-slider, cross-faded by fsx.js's 6e carousel driver. The track
   itself carries the inline aspect-ratio so it has real height even though
   every .sw-slide inside is absolutely positioned over it. */
.sw-banner-track--carousel { position: relative; width: 100%; }
.sw-banner-slider .sw-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .8s ease;
}
.sw-banner-slider .sw-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.sw-banner-slider .sw-slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* the in-article download block — the primary action for anyone who scrolled
   past the sidebar card, which on mobile is most people */
.dl-inline {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: var(--s3) 0 var(--s4); padding: 22px 24px; border-radius: var(--r-card);
  background:
    radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--ok) 10%, transparent) 0%, transparent 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
  box-shadow: var(--sh-1);
}
.dli-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dli-txt b { font-size: 16.5px; letter-spacing: -.015em; }
.dli-txt span { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 560px) { .dl-inline .btn { width: 100%; justify-content: center; } }

/* numbered install steps */
.how-list { counter-reset: how; list-style: none; padding: 0; margin: 0 0 var(--s3); }
.how-list li {
  counter-increment: how; position: relative; padding: 0 0 0 46px; margin-bottom: 18px;
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
}
.how-list li::before {
  content: counter(how); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 14px; font-weight: 750;
}

/* support prompt */
.sw-help {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: var(--s4) 0; padding: 22px 24px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--brand-line); box-shadow: var(--sh-1);
}
.swh-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.swh-ico .ico { width: 21px; height: 21px; }
.swh-body { flex: 1 1 240px; min-width: 0; }
.swh-body b { display: block; font-size: 16px; margin-bottom: 3px; letter-spacing: -.015em; }
.swh-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.sw-help .btn { word-break: break-all; }
@media (max-width: 560px) { .sw-help .btn { width: 100%; justify-content: center; } }

/* "people also search for" — plain text chips, not links: they describe this
   same page, so linking them anywhere would be a loop or a lie */
.kw-row { gap: 7px; margin-bottom: var(--s3); }
.kw {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-3); font-size: 12.5px; line-height: 1.3;
}
.kw-h3 { font-size: 15px; margin: var(--s3) 0 12px; }
.kw-note { font-size: 13.5px; color: var(--ink-3); font-style: italic; margin-top: -4px; }

/* ── requirement bar ────────────────────────────────────────────────────────
   The persistent bottom slot on the SEO landings. Same shell as .dl-bar but
   it asks for a brief instead of repeating a download the page has already
   offered twice above. Frosted to match the rest of those pages, and it holds
   a dismiss button — a bar that cannot be closed is an ad, not a prompt. */
.req-bar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 -6px 28px rgba(16,24,40,.14);
}
.req-bar .dl-bar-in { gap: 12px; }
.rb-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.rb-ico .ico { width: 18px; height: 18px; }
.req-bar .dl-bar-txt b { white-space: normal; font-size: 14.5px; }
.req-bar .dl-bar-txt span { font-size: 12.5px; }
.req-bar .rb-go { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.rb-close {
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--ink-3);
}
.rb-close:hover { background: var(--surface-2); color: var(--ink); }
.rb-close .ico { width: 16px; height: 16px; }
/* phone: the icon tile and the second line are the first things to go — the
   pitch and the button are what the bar is for */
@media (max-width: 560px) {
  .rb-ico { display: none; }
  .req-bar .dl-bar-txt span { display: none; }
  .req-bar .dl-bar-txt b { font-size: 13.5px; line-height: 1.35; }
}

/* ── sidebar enquiry form ───────────────────────────────────────────────────
   Lead capture in the space beside the article: someone who wants SEO or
   marketing work done, not someone downloading the program. Sits under the
   sticky download card and is deliberately quieter than it — the download is
   still the page's primary action, so this uses a plain button and tighter
   type rather than competing for the eye. */
.enq-card { margin-top: var(--s2); padding: 20px; }
.enq-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.enq-ico {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.enq-ico .ico { width: 18px; height: 18px; }
.enq-head b { display: block; font-size: 15.5px; letter-spacing: -.015em; margin-bottom: 2px; }
.enq-head span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* one column: at 340px a two-up grid leaves fields too narrow to read a real
   email address in */
.enq-fields { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
.enq-card .field label { font-size: 13px; }
.enq-card .opt { font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.enq-card .input, .enq-card .select { min-height: 42px; padding: 9px 12px; font-size: 14.5px; }
.enq-card .select { padding-right: 34px; }
.enq-card .textarea { min-height: 84px; padding: 10px 12px; font-size: 14.5px; }
.enq-card .btn .ico { width: 17px; height: 17px; }
.enq-card .btn-note { font-size: 11.5px; margin-top: 9px; }
.enq-copy { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.enq-copy b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.enq-copy p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.enq-copy .textarea { min-height: 130px; font-size: 13px; }

/* The sidebar now holds TWO cards, so the download card can no longer be
   sticky: a stuck card stays put while its sibling scrolls up and paints
   straight over it. The column scrolls as one instead, and the download stays
   reachable through the bottom bar — switched on for desktop here, since the
   sticky card is what does that job on every other page. */
.sw-enq .detail > aside > .dl-card { position: static; }
@media (min-width: 941px) {
  .sw-enq .dl-bar { display: block !important; }
  body.sw-enq.has-dlbar { padding-bottom: 76px; }
}

/* On a narrow screen the whole sidebar is hoisted above the article so the
   download button is not buried (see `.detail > aside`). The enquiry form must
   NOT ride along — a lead form before the visitor has read a word is both bad
   for them and worse for conversion. `display:contents` dissolves the aside at
   that width so its two cards become grid items in their own right and can be
   ordered independently: download first, article, enquiry last. */
@media (max-width: 940px) {
  .detail > aside { display: contents; }
  .detail > aside > .dl-card { order: -1; }
  .detail > aside > .enq-card { order: 1; margin-top: 0; }
}

/* ══ glassmorphism — SEO software landings only (body.sw-glass) ═════════════
   Rohit's brief: the banner is the single highlighted element, everything
   below it is "glassmorphism with shadow effect".

   Frosted glass only reads if something sits BEHIND it to refract, and this
   page background is a flat off-white. So the page first gets a fixed aurora
   wash — three soft brand/accent blobs — and the panels then blur whatever
   scrolls under them. Without the wash, translucency would be invisible and
   this would just be a normal card.

   Every rule declares an opaque colour FIRST and only adds translucency inside
   @supports(backdrop-filter), so a browser without it (or a user who has asked
   for reduced transparency, handled at the bottom) still gets solid, readable
   cards rather than washed-out text over artwork.
   ========================================================================= */
.sw-glass {
  --glass:      rgba(255,255,255,.66);
  /* nested panels (the cards INSIDE the article sheet) sit one step more opaque
     so glass-on-glass still separates instead of turning to mud */
  --glass-in:   rgba(255,255,255,.78);
  --glass-soft: rgba(255,255,255,.46);
  --glass-line: rgba(255,255,255,.85);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.7);
  --glass-sh:   0 1px 2px rgba(16,24,40,.05), 0 12px 32px -10px rgba(16,24,40,.18);
  --glass-sh-2: 0 2px 8px rgba(16,24,40,.07), 0 24px 54px -16px rgba(16,24,40,.28);
  --blur:       saturate(160%) blur(16px);
}
[data-theme="dark"] .sw-glass {
  --glass:      rgba(32,39,84,.62);
  --glass-in:   rgba(38,46,96,.74);
  --glass-soft: rgba(32,39,84,.42);
  --glass-line: rgba(255,255,255,.14);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.08);
  --glass-sh:   0 1px 2px rgba(0,0,0,.4), 0 14px 36px -12px rgba(0,0,0,.65);
  --glass-sh-2: 0 2px 8px rgba(0,0,0,.45), 0 28px 60px -18px rgba(0,0,0,.75);
}

/* the wash. `fixed` so it stays put while the page scrolls — the panels then
   pass over a changing backdrop, which is what makes the blur legible. */
.sw-glass::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 40% at 8% 2%,   color-mix(in srgb, var(--brand) 38%, transparent) 0%, transparent 68%),
    radial-gradient(44% 36% at 94% 16%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%),
    radial-gradient(58% 44% at 62% 98%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 72%);
}

/* shared frosted panel. The AD slot is deliberately NOT in this list — an ad
   dressed in the same glass as the editorial around it reads as our own
   content, which is exactly what AdSense placement policy forbids. */
.sw-glass .sw-idcard,
.sw-glass .prose,
.sw-glass .card,
.sw-glass .app-card,
.sw-glass .faq-item,
.sw-glass .dl-inline,
.sw-glass .sw-help {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--glass-sh);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sw-glass .sw-idcard,
  .sw-glass .prose,
  .sw-glass .card,
  .sw-glass .app-card,
  .sw-glass .faq-item,
  .sw-glass .dl-inline,
  .sw-glass .sw-help {
    background: var(--glass);
    border-color: var(--glass-line);
    box-shadow: var(--glass-sh), var(--glass-edge);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  }
  /* panels nested inside the article sheet */
  .sw-glass .prose .app-card,
  .sw-glass .prose .faq-item,
  .sw-glass .prose .sw-help { background: var(--glass-in); }
}

/* the article itself becomes the main sheet of glass, so the body copy sits ON
   the material rather than floating loose on the wash beside two panels */
.sw-glass .prose { border-radius: var(--r-card); padding: 30px 34px; }
@media (max-width: 700px) { .sw-glass .prose { padding: 24px 20px; } }
/* the ad keeps a plain, clearly-not-editorial well */
.sw-glass .prose .ad { background: var(--surface-2); border-radius: var(--r-ctl); }

/* the identity panel under the banner — title, vendor, badges and lede, lifted
   onto one sheet of glass so the hero and the page below are visually joined */
.sw-glass .sw-idcard {
  border-radius: var(--r-card); padding: 26px 28px; margin-bottom: var(--s2);
}
.sw-glass .sw-idcard .detail-head { margin-bottom: 14px; }
.sw-glass .sw-idcard .detail-lede { margin-bottom: 0; }
@media (max-width: 560px) { .sw-glass .sw-idcard { padding: 20px 18px; } }

/* the in-article download block keeps its green "official build" tint, now
   layered over the frost instead of a flat white */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sw-glass .dl-inline {
    background:
      radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--ok) 16%, transparent) 0%, transparent 62%),
      var(--glass);
    border-color: color-mix(in srgb, var(--ok) 32%, var(--glass-line));
  }
}

/* hover lift — the shadow deepens rather than the card changing colour */
.sw-glass .app-card:hover,
.sw-glass .app-card:focus-within { box-shadow: var(--glass-sh-2), var(--glass-edge); }
.sw-glass .faq-item[open] { box-shadow: var(--glass-sh-2), var(--glass-edge); border-color: var(--brand-line); }
/* the sticky download card is the page's primary action: one step brighter and
   one step higher than every other panel */
.sw-glass .dl-card { box-shadow: var(--glass-sh-2), var(--glass-edge); }

/* small surfaces — the spec rows, safety note and keyword chips are inside or
   beside glass, so a solid fill would read as a patch stuck onto it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sw-glass .spec li,
  .sw-glass .kw { background: var(--glass-soft); border-color: var(--glass-line); }
  .sw-glass .safety {
    background: color-mix(in srgb, var(--ok-soft) 72%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
}
/* buttons stay solid: a translucent call-to-action reads as disabled */

/* Honour the OS "reduce transparency" setting — the frost is decoration, and
   for anyone who has switched it off the opaque fallback is the whole point. */
@media (prefers-reduced-transparency: reduce) {
  .sw-glass::before { display: none; }
  .sw-glass .sw-idcard,
  .sw-glass .prose,
  .sw-glass .card,
  .sw-glass .app-card,
  .sw-glass .faq-item,
  .sw-glass .dl-inline,
  .sw-glass .sw-help,
  .sw-glass .spec li,
  .sw-glass .kw {
    background: var(--surface); border-color: var(--border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Enriched alternatives-page content — comparison table + per-app picks (18-Aug-2026) */
.table-wrap{overflow-x:auto;margin:1rem 0 1.5rem;-webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.cmp-table th,.cmp-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--border,#e5e7eb);vertical-align:top}
.cmp-table thead th{font-weight:600;color:var(--muted,#6b7280);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;border-bottom-width:2px}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table td a{font-weight:600}
.pick-item{padding:.75rem 0;border-top:1px solid var(--border,#e5e7eb)}
.pick-item:first-of-type{border-top:none}
.pick-item h3{margin:0 0 .25rem;font-size:1.05rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.pick-item p{margin:0;color:var(--muted,#374151);line-height:1.55}
.pick-lic{font-size:.72rem;font-weight:600;color:var(--muted,#6b7280);background:var(--chip-bg,#f3f4f6);padding:.1rem .45rem;border-radius:99px;letter-spacing:.02em}
@media (prefers-color-scheme:dark){
  .cmp-table th,.cmp-table td{border-color:var(--border,#2a2f3a)}
  .pick-item{border-color:var(--border,#2a2f3a)}
  .pick-lic{background:var(--chip-bg,#1e232e)}
}

/* ── Monetization ad slots (19-Aug-2026) — 7 placements, different formats ── */
.ad-slot{margin:var(--s5) auto;max-width:970px;text-align:center;clear:both}
.ad-slot .ad-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.ad-slot ins{display:block}
.ad-leaderboard{margin:var(--s2) auto var(--s3);min-height:90px}
.ad-in-feed{margin:var(--s4) auto}
.ad-multiplex{margin:var(--s5) auto;max-width:1100px}
.ad-anchor{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;max-width:none;background:var(--bg);border-top:1px solid var(--border);padding:6px 42px 6px 10px;box-shadow:0 -4px 18px rgba(0,0,0,.10)}
.ad-anchor .ad-label{display:none}
.ad-anchor-x{position:absolute;top:5px;right:8px;width:26px;height:26px;border:none;background:var(--border-2);color:var(--ink);border-radius:50%;font-size:17px;line-height:24px;cursor:pointer;padding:0}
@media print{.ad-slot{display:none!important}}

/* ── "Post Your Requirement" section — replaces the old "Not sure what to
   choose?" finder (Mayank, 22-Aug) ─────────────────────────────────────── */
.req-panel {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr);
  border-radius: 18px; overflow: hidden; box-shadow: var(--sh-2); border: 1px solid var(--border);
}
.req-left { display: block; }
.req-left img { display: block; width: 100%; height: 100%; object-fit: cover; }
.req-right { background: var(--surface); padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; }
.req-right-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.req-right-head h2 { margin: 0; font-size: clamp(19px, 2vw, 23px); }
.req-list { display: flex; flex-direction: column; gap: 14px; }
.req-lead {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--rc, #2563eb);
  border-radius: 10px; box-shadow: var(--sh-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.req-lead:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.req-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--rc, #2563eb) 14%, transparent); color: var(--rc, #2563eb);
}
.req-ico .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.req-body { flex: 1 1 auto; min-width: 0; }
.req-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.req-title-row h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.req-tag {
  font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--rc, #2563eb) 14%, transparent); color: var(--rc, #2563eb);
  white-space: nowrap;
}
.req-meta { margin: 0; font-size: 13px; color: var(--ink-2); }
.req-right-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.req-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.req-view {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--border-2); font-size: 12.5px; font-weight: 650; color: var(--link);
  white-space: nowrap; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.req-view:hover { background: var(--surface-2); text-decoration: none; }
@media (max-width: 780px) {
  .req-panel { grid-template-columns: 1fr; }
  .req-left img { aspect-ratio: 1 / 1; }
  .req-lead { flex-wrap: wrap; }
  .req-right-col { flex-direction: row; align-items: center; margin-left: 58px; }
}

/* ── "Industries We Serve" section (Mayank, 22-Aug) ─────────────────────── */
.ind-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: clamp(18px, 2.6vw, 30px); box-shadow: var(--sh-2);
}
.ind-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ind-accent-bar { display: block; width: 46px; height: 4px; border-radius: 999px; margin-bottom: 10px; background: linear-gradient(90deg, #4a1ffd, #06b6d4); }
.ind-panel-head h2 { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; color: #0f1222; }
.ind-panel-head .sub { margin: 0; color: var(--ink-2); }
.ind-explore-all {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px;
  border-radius: 999px; background: linear-gradient(90deg, #4a1ffd, #6d3cff); color: #fff;
  font-weight: 650; font-size: 14px; box-shadow: 0 8px 18px rgba(74, 31, 253, .3);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ind-explore-all:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 10px 22px rgba(74, 31, 253, .38); }

.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ind-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; border-radius: 14px; padding: 18px; overflow: hidden;
  background: var(--ic-img, none) center/cover, linear-gradient(160deg, var(--ic1, #0f2b52), var(--ic2, #1c3d6b)) center/cover;
  color: #fff; border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ind-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15, 23, 42, .22); text-decoration: none; }
.ind-card-featured { box-shadow: 0 0 0 2px #a78bfa, 0 10px 26px rgba(124, 58, 237, .35); }
/* dark shadow gradient behind the text block so it stays readable over any
   photo — CSS-driven, not baked into the image (Mayank, 22-Aug) */
.ind-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .4) 40%, transparent 72%);
}
.ind-badge, .ind-name, .ind-desc, .ind-more { position: relative; z-index: 1; }
.ind-badge {
  position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(2px); color: #fff;
}
.ind-badge .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.ind-name { font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 4px; }
.ind-desc { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); margin-bottom: 14px; max-width: 88%; }
.ind-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; background: rgba(10, 14, 30, .55);
  border: 1.5px solid rgba(255, 255, 255, .65); font-size: 13px; font-weight: 650; color: #fff;
  backdrop-filter: blur(3px);
}
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── "Popular Digital Services" section — replaces "Free alternatives to
   paid software" (Mayank, 22-Aug); icons are generic/original, not real
   third-party product logos ─────────────────────────────────────────── */
.pds-head { margin-bottom: 22px; }
.pds-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 14px;
}
.pds-eyebrow .ico { width: 14px; height: 14px; stroke-width: 2; }
.pds-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pds-head-row h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.pds-head-row h2 em {
  font-style: normal; background: linear-gradient(90deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pds-head-row .sub { margin: 0; max-width: 46ch; }
.pds-head-row .more { flex: 0 0 auto; }

/* always a single row — never wraps, scrolls horizontally if it doesn't
   fit (Mayank, 22-Aug), same pattern as the category chips row */
/* no slider/scroll — wraps to new rows instead when it doesn't all fit
   (Mayank, 22-Aug) */
.pds-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pds-card {
  flex: 1 1 108px; min-width: 108px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 22px 8px 18px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pds-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--pc, var(--brand)); text-decoration: none; }
.pds-ico {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc, var(--brand)) 14%, transparent); color: var(--pc, var(--brand));
}
.pds-ico .ico { width: 26px; height: 26px; stroke-width: 1.7; }
.pds-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.pds-underline { width: 22px; height: 3px; border-radius: 999px; background: var(--pc, var(--brand)); }

/* ── "Process of Software / Product & Directory Submission" — replaces the
   pb-hslider auto-scroll banner strip; the ad banner that used to sit
   beside it now stands alone below (Mayank, 22-Aug) ───────────────────── */
.sp-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.sp-eyebrow { display: block; color: var(--brand-ink); font-size: 13px; font-weight: 700; letter-spacing: .12em; margin-bottom: 10px; }
.sp-head h2 { margin: 0 0 10px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.sp-head .sub { margin: 0; }

.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.sp-img { border-radius: 12px; overflow: hidden; margin-bottom: 16px; aspect-ratio: 1521 / 1034; }
.sp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--brand-soft); color: var(--brand-ink);
}
.sp-ico .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.sp-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 750; }
.sp-desc { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.sp-process-label { font-size: 13px; font-weight: 700; color: var(--brand-ink); margin-bottom: 10px; display: block; }
.sp-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }
.sp-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-weight: 700;
}
.sp-cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #7c3aed);
  color: #fff; font-weight: 650; font-size: 14px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.sp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); text-decoration: none; }
@media (max-width: 900px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── "Real Reviews. Real Results." client-reviews section (Mayank, 22-Aug);
   avatars are stock headshots for illustrative reviews, trust badges are
   generic (not real third-party platform logos) ────────────────────────── */
.rv-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.rv-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 16px;
}
.rv-eyebrow .ico { width: 14px; height: 14px; stroke-width: 2; }
.rv-head h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.rv-head h2 em {
  font-style: normal; background: linear-gradient(90deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-head .sub { margin: 0; }

.rv-summary {
  display: grid; grid-template-columns: minmax(160px, .8fr) minmax(0, 1.6fr) minmax(180px, .9fr);
  gap: 24px; align-items: center; padding: 26px 28px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1); margin-bottom: 28px;
}
.rv-score { text-align: center; border-right: 1px solid var(--border); padding-right: 24px; }
.rv-score b { display: block; font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); }
.rv-stars { display: block; color: #f59e0b; font-size: 18px; letter-spacing: 2px; margin: 6px 0; }
.rv-score-sub { font-size: 13px; color: var(--ink-2); }
.rv-bars { display: flex; flex-direction: column; gap: 6px; }
.rv-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.rv-bar-row span:first-child { width: 8px; text-align: right; color: var(--ink); font-weight: 650; }
.rv-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.rv-bar-row b { width: 34px; text-align: right; color: var(--ink); font-weight: 650; }
.rv-verified { text-align: center; border-left: 1px solid var(--border); padding-left: 24px; }
.rv-verified-ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px;
  background: var(--brand-soft); color: var(--brand-ink);
}
.rv-verified-ico .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.rv-verified b { display: block; font-size: 14px; margin-bottom: 2px; }
.rv-verified span { font-size: 12.5px; color: var(--ink-2); }

.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.rv-card {
  display: flex; flex-direction: column; padding: 20px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rv-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rv-who b { font-size: 14px; font-weight: 700; }
.rv-who span { font-size: 12px; color: var(--ink-2); }
.rv-card-stars { flex: 0 0 auto; color: #f59e0b; font-size: 13px; letter-spacing: 1px; align-self: flex-start; }
.rv-text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); flex: 1; }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-tag { font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); }
.rv-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.rv-more-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 24px 20px; border-radius: 14px; background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.rv-more-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--brand-ink); box-shadow: var(--sh-1);
}
.rv-more-ico .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.rv-more-card h3 { margin: 0; font-size: 16px; font-weight: 750; }
.rv-more-card p { margin: 0; font-size: 13px; color: var(--ink-2); }
.rv-more-btn {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff;
  font-weight: 650; font-size: 13.5px; transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rv-more-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(79, 70, 229, .3); text-decoration: none; }

.rv-trust {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 26px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
}
.rv-trust-lead { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); flex: 0 0 auto; }
.rv-trust-ico {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink); flex: 0 0 auto;
}
.rv-trust-ico .ico { width: 18px; height: 18px; stroke-width: 1.7; }
.rv-trust-badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rv-trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.rv-trust-badge .ico { width: 16px; height: 16px; stroke-width: 1.8; color: var(--ink-3); }
@media (max-width: 900px) {
  .rv-summary { grid-template-columns: 1fr; }
  .rv-score, .rv-verified { border: 0; padding: 0; }
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) { .rv-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── "More than a software directory" redesign — numbered process cards +
   trust bar (Mayank, 22-Aug); right-side "Promote Your Business" panel
   (.mw-side/.biz-promo) is untouched ───────────────────────────────────── */
.proc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 10px;
}
.proc-eyebrow .ico { width: 14px; height: 14px; stroke-width: 2; }
.proc-sub { font-weight: 650; }
.proc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; }
.proc-card {
  position: relative; padding: 22px 16px 20px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.proc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.proc-ico {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  background: color-mix(in srgb, var(--pc, var(--brand)) 14%, transparent); color: var(--pc, var(--brand));
}
.proc-ico .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.proc-num { display: block; font-size: 13px; font-weight: 700; color: var(--pc, var(--brand)); margin-bottom: 6px; }
.proc-card h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 750; }
.proc-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.proc-underline { display: block; width: 24px; height: 3px; border-radius: 999px; background: var(--pc, var(--brand)); margin-top: 14px; }
.proc-chevron {
  position: absolute; top: 50%; right: -20px; transform: translateY(-50%); z-index: 1;
  color: var(--border-2); font-size: 18px; font-weight: 700;
}
@media (max-width: 1180px) { .proc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proc-chevron { display: none; } }
@media (max-width: 620px)  { .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.proc-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  padding: 20px 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1);
}
.proc-trust-item { display: flex; align-items: center; gap: 12px; }
.proc-trust-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc, var(--brand)) 14%, transparent); color: var(--pc, var(--brand));
}
.proc-trust-ico .ico { width: 20px; height: 20px; stroke-width: 1.7; }
.proc-trust-item b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.proc-trust-item span { font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .proc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .proc-trust { grid-template-columns: minmax(0, 1fr); } }

/* ── "Grow Your Business With Us" banner — replaces the plain "Publish free
   software?" strip (Mayank, 22-Aug) ─────────────────────────────────────── */
.grow-banner {
  position: relative; display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 20px;
  border-radius: 20px; overflow: hidden; padding: 0 24px 0 0; min-height: 0;
  background: linear-gradient(120deg, #4c1d95 0%, #4338ca 45%, #2563eb 100%);
  box-shadow: var(--sh-2);
}
.grow-banner-people { flex: 0 0 auto; height: 240px; width: auto; max-width: 240px; align-self: flex-end; object-fit: contain; }
.grow-banner-copy { flex: 1 1 200px; min-width: 0; color: #fff; padding: 20px 0; }
.grow-banner-accent { display: block; width: 40px; height: 4px; border-radius: 999px; background: #fff; opacity: .7; margin-bottom: 14px; }
.grow-banner-copy h2 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.2; color: #fff; }
.grow-banner-copy p { margin: 0; max-width: 36ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.grow-banner-actions { flex: 0 0 auto; display: flex; gap: 12px; padding: 16px 0; }
.grow-mini-card {
  position: relative; display: flex; flex-direction: column; gap: 5px; width: 152px;
  padding: 18px 30px 20px 16px; border-radius: 14px; background: rgba(255, 255, 255, .96);
  color: #0f1222; box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.grow-mini-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); text-decoration: none; }
.grow-mini-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: linear-gradient(135deg, #4338ca, #2563eb); color: #fff;
}
.grow-mini-ico .ico { width: 21px; height: 21px; stroke-width: 1.8; }
.grow-mini-card b { font-size: 16px; font-weight: 750; }
.grow-mini-card > span:not(.grow-mini-ico):not(.grow-mini-arrow) { font-size: 13px; color: var(--ink-2); }
.grow-mini-arrow {
  position: absolute; right: 14px; bottom: 16px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-2); display: grid; place-items: center; color: #4338ca; font-size: 16px; line-height: 1;
}
@media (max-width: 1080px) {
  .grow-banner { padding: 24px; flex-wrap: wrap; min-height: 0; }
  .grow-banner-people { display: none; }
}
@media (max-width: 620px) { .grow-mini-card { width: 100%; } .grow-banner-actions { flex-direction: column; } }

/* ── "Blog & Community" — replaces the two-panel "Latest requirements /
   Recent discussions" community section (Mayank, 22-Aug) ─────────────────── */
.bc-head { position: relative; margin-bottom: 26px; }
.bc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 14px;
}
.bc-eyebrow .ico { width: 14px; height: 14px; stroke-width: 1.8; }
.bc-viewall { position: absolute; top: 6px; right: 0; }
.bc-head h2 { margin: 0 0 10px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.bc-head h2 em {
  font-style: normal; background: linear-gradient(90deg, #4f46e5, #2563eb);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-head .sub { margin: 0; max-width: 62ch; }

.bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; margin-bottom: 24px; }

.bc-post-card {
  background: #0b1224; color: #fff; border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column;
}
.bc-post-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, #4338ca, #2563eb); color: #fff;
}
.bc-post-icon .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.bc-post-card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 800; line-height: 1.3; color: #fff; }
.bc-post-card p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.bc-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 18px; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bc-step { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bc-step b { color: #818cf8; font-size: 15px; font-weight: 800; }
.bc-step span { color: rgba(255, 255, 255, .85); }
.bc-post-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.bc-post-btn, .bc-post-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 650; transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bc-post-btn .ico, .bc-post-btn-ghost .ico { width: 16px; height: 16px; stroke-width: 1.8; }
.bc-post-btn { background: linear-gradient(90deg, #4338ca, #2563eb); color: #fff; }
.bc-post-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, .35); text-decoration: none; }
.bc-post-btn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.bc-post-btn-ghost:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }

.bc-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bc-post { display: flex; flex-direction: column; color: var(--ink); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.bc-post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
.bc-post-img { aspect-ratio: 16 / 9; }
.bc-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-post-tag { align-self: flex-start; margin: 12px 0 8px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tg, var(--brand)) 14%, transparent); color: var(--tg, var(--brand)); }
.bc-post h4 { margin: 0 14px 10px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.bc-post-meta { display: flex; align-items: center; gap: 6px; margin: 0 14px 14px; font-size: 12px; color: var(--ink-3); }
.bc-post-meta .ico { width: 13px; height: 13px; stroke-width: 1.8; }
.bc-post-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.bc-post-wide .bc-post-img { flex: 0 0 200px; aspect-ratio: 4 / 3; }
.bc-post-wide-body { padding: 4px 0; }
.bc-post-wide-body .bc-post-tag { margin: 0 0 8px; }
.bc-post-wide-body h4 { margin: 0 0 8px; }
.bc-post-wide-body .bc-post-meta { margin: 0; }

/* blog & community slider (assets/blog-slider.js) — .bc-track holds two
   back-to-back copies of the item set (.bc-set) so the auto-scroll wrap
   is seamless; card width is set by JS via --bc-card-w to fit N per view. */
.bc-slider { position: relative; }
.bc-slider-clip { overflow: hidden; }
.bc-track { display: flex; gap: 16px; }
.bc-set { display: flex; gap: 16px; }
.bc-track .bc-post { flex: 0 0 var(--bc-card-w, 280px); width: var(--bc-card-w, 280px); }
.bc-slider-prev { left: 10px; }
.bc-slider-next { right: 10px; }

.bc-trust { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; border: 1px solid var(--border); background: var(--brand-soft); }
.bc-trust-item { flex: 1 1 220px; display: flex; align-items: flex-start; gap: 12px; }
.bc-trust-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-ink); box-shadow: var(--sh-1); }
.bc-trust-ico .ico { width: 19px; height: 19px; stroke-width: 1.7; }
.bc-trust-item b { display: block; font-size: 14.5px; font-weight: 750; margin-bottom: 2px; }
.bc-trust-item span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

@media (max-width: 980px) {
  .bc-grid { grid-template-columns: minmax(0, 1fr); }
  .bc-viewall { position: static; display: inline-flex; margin-top: 8px; }
}
@media (max-width: 700px) {
  .bc-posts { grid-template-columns: minmax(0, 1fr); }
  .bc-post-wide { flex-direction: column; align-items: stretch; }
  .bc-post-wide .bc-post-img { flex: none; aspect-ratio: 16 / 9; }
}

/* ── Sticky side CTA tabs (Buy Leads / Free Listing) — 25-Aug-2026 ── */
.side-cta { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.side-cta-tab { display: flex; align-items: center; gap: 8px; padding: 16px 11px; writing-mode: vertical-rl; color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .02em; text-decoration: none; border-radius: 0 14px 14px 0; box-shadow: 0 8px 22px rgba(16,24,40,.18); transition: transform 200ms ease, box-shadow 200ms ease; }
.side-cta-tab .ico { width: 17px; height: 17px; stroke-width: 2.1; flex: 0 0 auto; }
.side-cta-tab:hover { transform: translateX(6px); box-shadow: 0 10px 28px rgba(16,24,40,.26); text-decoration: none; color: #fff; }
.side-cta-tab:active { transform: translateX(3px) scale(.98); }
.side-cta-leads { background: linear-gradient(180deg, #0a1440, #021555); }
.side-cta-listing { background: linear-gradient(180deg, #0892fe, var(--brand)); }
[data-theme="dark"] .side-cta-tab { box-shadow: 0 8px 22px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) { .side-cta-tab { transition: none; } }
@media (max-width: 760px) {
  .side-cta { left: 0; right: 0; top: auto; bottom: 0; transform: none; flex-direction: row; gap: 0; z-index: 80; }
  .side-cta-tab { flex: 1 1 50%; writing-mode: horizontal-tb; justify-content: center; border-radius: 0; padding: 12px 8px; box-shadow: 0 -4px 16px rgba(16,24,40,.16); font-size: 13px; }
  .side-cta-tab:hover { transform: none; }
  body:has(.side-cta) { padding-bottom: 52px; }
}

/* ── Paid banner-ad placements (Gaurav, 31-Aug-2026) — filled client-side by
   assets/banners.js from lead.freesoftwarex.com/api/public-banners.php.
   Every slot starts [hidden] and JS only unhides it once a real paid banner
   exists for that placement, so an empty slot never reserves layout space. */
.ad-slot { margin: 0 auto 18px; }
.ad-slot .ad-banner-link { display: block; position: relative; }
.ad-slot .ad-banner-link img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ad-slot .ad-label { position: absolute; top: 8px; left: 8px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: rgba(15, 23, 42, .55); padding: 2px 7px; border-radius: 5px; }

.ad-slot-hero { max-width: 1200px; }
.ad-slot-hero img { aspect-ratio: 1200 / 180; }

.ad-slot-mid { max-width: 1200px; margin-left: auto; margin-right: auto; }
.ad-slot-mid img { aspect-ratio: 1200 / 160; }

.ad-slot-side { width: 180px; max-width: 38%; margin-left: auto; margin-right: 0; margin-bottom: 18px; }
.ad-slot-side img { aspect-ratio: 3 / 4; }
@media (max-width: 640px) { .ad-slot-side { width: 130px; } }

.ad-slot-zigzag { max-width: 640px; margin-bottom: 18px; }
.ad-slot-zigzag-right { margin-left: auto; margin-right: 0; }
.ad-slot-zigzag-left { margin-left: 0; margin-right: auto; }
.ad-slot-zigzag img { aspect-ratio: 16 / 6; }
@media (max-width: 760px) { .ad-slot-zigzag { max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } }