:root{
  --font-sans:"Hind Vadodara",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --brand:#1062fe;
  --brand-light:#009AFF;
  --brand-soft:#D6E4FF;
  --brand-softer:#E1EFFF;
  --brand-dark:#003CB2;
  --brand-2:#083fbf;

  --success:#36C055;
  --success-soft:#E6F9F1;
  --warning:#ffaa00;
  --warning-soft:#FFF4D6;
  --danger:#d92632;
  --saving:#CF0C52;
  --saving-soft:#FCE0EB;

  --ink:#17191C;
  --ink-2:#2a3447;
  --muted:#5E636E;
  --muted-2:#979ba4;
  --line:#E9EAEC;
  --line-2:#DEE0E3;
  --bg-soft:#F7F7F8;
  --bg:#ffffff;

  --container:1288px;
  --section-y:100px;
  --radius:8px;
  --radius-sm:6px;
  --radius-lg:22px;
  --radius-pill:10px;

  --shadow-card:0 0 1px rgba(0,0,0,.10), 0 2px 24px rgba(0,0,0,.08);
  --shadow-card-hover:0 0 1px rgba(0,0,0,.12), 0 14px 40px rgba(16,98,254,.14);
  --shadow:0 4px 16px rgba(15,23,41,.06), 0 1px 2px rgba(15,23,41,.04);
  --shadow-lg:0 20px 50px -12px rgba(15,23,41,.18), 0 8px 20px -8px rgba(15,23,41,.08);

  /* Aliases used by newer rich pages (accent == brand-light family) + dark section bg.
     Every var() a rich page references MUST resolve — an undefined custom property
     invalidates the whole declaration at computed-value time (invisible text,
     missing shadows), since per-page :root blocks are stripped by the porter. */
  --accent:#009AFF;
  --accent-soft:#E1EFFF;
  --bg-deep:#0b1220;
  --shadow-nav:0 0 1px rgba(0,0,0,.12), 0 8px 32px rgba(0,0,0,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-y:scroll}  /* always reserve the vertical scrollbar gutter so .wrap horizontal alignment stays identical between short pages (e.g. /apps) and long rich pages (e.g. /apps/gst-manager) */
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:24px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:0}

.wrap{max-width:var(--container);margin:0 auto;padding:0 40px}
@media (max-width:640px){.wrap{padding:0 20px}}

h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-.01em}
h1{font-size:48px;line-height:56px;font-weight:700}
h2{font-size:40px;line-height:52px;font-weight:700}
h3{font-size:24px;line-height:32px;font-weight:700}
h4{font-size:18px;line-height:26px;font-weight:500}
@media (max-width:768px){
  h1{font-size:36px;line-height:44px}
  h2{font-size:30px;line-height:38px}
}

.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-sm);
  font-weight:500;font-size:15px;line-height:20px;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-light);border-color:var(--brand-light)}
.btn-primary:active{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-default,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-default:hover,.btn-ghost:hover{background:var(--bg-soft);border-color:var(--muted-2)}
.btn-faded-primary{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft);font-weight:500}
.btn-faded-primary:hover{background:#B3CCFF;border-color:#B3CCFF}
.btn-sm{padding:8px 14px;font-size:13px}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:500;line-height:18px;letter-spacing:.02em;
  border:1px solid var(--line);
  background:#fff;color:var(--ink-2);
}
.pill-brand{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft)}
.pill-plat-whmcs{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-soft)}
.pill-plat-woocommerce{background:#F3E8FF;color:#7c3aed;border-color:#F3E8FF}
.pill-plat-acellemail{background:var(--success-soft);color:#047857;border-color:var(--success-soft)}
.pill-plat-shopify{background:var(--warning-soft);color:#92660a;border-color:var(--warning-soft)}
.pill svg{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:5px;flex:none}
.card-icon.brand{background:#fff;border:1px solid var(--line-2)}
.card-icon.brand svg{width:30px;height:30px}
.pill-status-alpha{background:var(--warning-soft);color:#92660a;border-color:var(--warning-soft);font-weight:700}
.pill-status-coming{background:var(--saving-soft);color:var(--saving);border-color:var(--saving-soft);font-weight:700}

/* ---------- Top condensed bar ---------- */
/* ---------- Topbar ---------- */
/* Matches relyweb.co's main-site `.main-top` utility bar:
   - Font: 14px / 400 weight / 20px line-height (Lagom2 default)
   - Color: muted gray
   - Per-link padding (Lagom2 pattern: padding lives on the <a>, not as gap on the ul)
   - Slim height (~38–40px), right-anchored, no logo */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:400;
  line-height:20px;
  color:var(--muted);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:38px;
  /* don't override .wrap's `padding: 0 40px` here — it must match .nav-inner so the
     Return link aligns with the Apps logo below, and the right-side nav aligns with
     the Login button below */
}
.topbar-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 0;
  font-size:14px;font-weight:400;line-height:20px;
  color:var(--muted);text-decoration:none;
  transition:color .15s ease;
}
.topbar-back:hover{color:var(--brand)}
.topbar-back svg{width:14px;height:14px;flex-shrink:0;color:var(--muted-2,#9aa3b2);transition:color .15s ease, transform .15s ease}
.topbar-back:hover svg{color:var(--brand);transform:translateX(-2px)}

.topbar-nav{list-style:none;padding:0;margin:0;display:flex;align-items:stretch;gap:0;white-space:nowrap}
.topbar-nav > li{position:relative;display:flex;align-items:stretch}
.topbar-nav > li > a{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;
  font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;
  color:var(--muted);text-decoration:none;
  transition:color .15s ease;
}
.topbar-nav > li:last-child > a{padding-right:0}
.topbar-nav > li > a:hover{color:var(--brand)}
.topbar-nav svg{width:14px;height:14px;flex-shrink:0;color:var(--muted-2,#9aa3b2)}
.topbar-nav > li > a:hover svg{color:var(--brand)}
.topbar-nav .topbar-caret{width:10px;height:10px;opacity:.75}
.topbar-phone{font-variant-numeric:tabular-nums}

.topbar-dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  list-style:none;margin:0;padding:6px 0;
  min-width:180px;background:#fff;
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:200;             /* higher than .nav (z:60) so the menu floats over the sticky nav below */
}
.topbar-dropdown:hover .topbar-dropdown-menu,
.topbar-dropdown:focus-within .topbar-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.topbar-dropdown-menu li a{
  display:block;padding:8px 16px;font-size:14px;font-weight:400;
  color:var(--ink-2);text-decoration:none;transition:background .15s ease, color .15s ease;
}
.topbar-dropdown-menu li a:hover{background:var(--bg-soft);color:var(--brand)}

@media (max-width:768px){
  .topbar-inner{padding:5px 0;gap:12px}
  .topbar-back span{display:none}
  .topbar-back svg{width:16px;height:16px}
  .topbar-nav{gap:12px;font-size:12px}
  .topbar-nav .topbar-nav-hide-md{display:none}
}

/* ---------- Main nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.nav.scrolled{box-shadow:var(--shadow-nav)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:82px;
}
.logo{display:flex;align-items:center;line-height:0}
.logo img{height:50px;width:auto;display:block}
@media (max-width:640px){.logo img{height:42px}}
/* Main nav links — Lagom2 pattern: each link is its own padded clickable area, items
   spaced via the padding (not an outer gap). Gives generous breathing room like the
   `Hosting · Servers · Domains · Emails · Security & Tools · Company` row on relyweb.co. */
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-size:16px;font-weight:400;line-height:24px;color:var(--ink);
  position:relative;padding:6px 16px;transition:color .15s ease;
}
.nav-links a:hover{color:var(--brand)}
.nav-links a.active{color:var(--brand);font-weight:500}
.nav-links a.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-29px;height:2px;background:var(--brand);
}
.nav-toggle{display:none}
@media (max-width:991px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line-2)}
  .nav-toggle svg{width:18px;height:18px;color:var(--ink)}
  .nav-inner{height:74px}
}

/* ---------- Hero ---------- */
.hero{padding:96px 0 56px;text-align:left;background:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(16,98,254,.06), transparent 60%),
    radial-gradient(700px 400px at 80% 30%, rgba(0,154,255,.04), transparent 60%);
  pointer-events:none;
}
.hero-inner{position:relative;width:100%}
.hero-text{max-width:840px;margin:0}
.hero h1{margin-bottom:20px}
.hero .sub{font-size:18px;line-height:28px;color:var(--muted);font-weight:300;max-width:680px;margin:0}

/* Animated router SVG */
.hero-router{margin:64px auto 0;max-width:1200px;width:100%}
.hero-router img{width:100%;height:auto;display:block}

/* Single-column hero auto-centers (no .hero-grid child = stacked, so centered).
   Two-column heroes keep .hero-grid and stay left-aligned by default. */
.hero:not(:has(.hero-grid)){text-align:center}
.hero:not(:has(.hero-grid)) .hero-text{margin:0 auto}
.hero:not(:has(.hero-grid)) .hero .sub,
.hero:not(:has(.hero-grid)) .sub{margin:0 auto}

@media (max-width:768px){.hero{padding:64px 0 32px}.hero-router{margin-top:40px}}

/* ---------- Filter strip ---------- */
.filters{
  position:sticky;top:82px;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.filters-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  justify-content:space-between;
}
.filter-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500;margin-right:4px}
.fpill{
  padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:#fff;color:var(--ink);
  font-size:13px;font-weight:500;line-height:18px;
  cursor:pointer;transition:all .15s ease;
}
.fpill:hover{border-color:var(--brand);color:var(--brand)}
.fpill.active{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
.fpill.active-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.filters-count{font-size:13px;color:var(--muted);font-weight:400;white-space:nowrap}
.filters-count strong{color:var(--ink);font-weight:500}
.filters-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.filter-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:8px 14px;background:#fff;flex:1;min-width:240px;max-width:380px}
.filter-search:focus-within{border-color:var(--brand)}
.filter-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.filter-search input{border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ink);width:100%}
.fpills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters .filter-group{align-items:center}
.filters .filter-group+.filter-group{margin-top:10px}
.fpill .cnt{margin-left:6px;font-size:12px;font-weight:400;color:var(--muted-2)}
.fpill.active .cnt,.fpill.active-dark .cnt{color:inherit;opacity:.7}
.grid-empty{text-align:center;padding:54px 20px;color:var(--muted)}
.grid-empty strong{display:block;color:var(--ink);font-size:18px;font-weight:600;margin-bottom:6px}
.link-btn{background:none;border:0;color:var(--brand);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.collection{margin-bottom:0}
.collection-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.collection-head h2{font-size:24px;line-height:32px}
.collection-sub{font-size:13px;color:var(--muted)}
.collection-viewall{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--brand);text-decoration:none;transition:gap .15s ease}
.collection-viewall:hover{gap:10px}
.collection .grid{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:18px}
.collection-all{text-align:center;margin-top:8px}
@media (max-width:1080px){#collections{grid-template-columns:1fr}}
@media (max-width:560px){.collection .grid{grid-template-columns:1fr}}
/* directory landing search */
.dir-search-hero{display:flex;align-items:center;gap:10px;max-width:620px;margin:0 auto 8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:14px 22px;background:#fff;box-shadow:var(--shadow-card)}
.dir-search-hero:focus-within{border-color:var(--brand)}
.dir-search-hero svg{width:20px;height:20px;color:var(--muted);flex:none}
.dir-search-hero input{border:0;outline:0;background:none;font:inherit;font-size:16px;width:100%;color:var(--ink)}
#collections{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:46px 34px}
/* browse-by tiles */
.browse-block{margin-top:64px}
.browse-head{margin-bottom:22px}
.browse-head h2{font-size:24px;line-height:32px}
.browse-sub{margin:4px 0 0;font-size:14px;color:var(--muted)}
.browse-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.browse-grid.platforms{grid-template-columns:repeat(5,1fr)}
.browse-tile{position:relative;display:block;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.browse-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:transparent}
.browse-tile .bt-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:var(--brand-softer);color:var(--brand);transition:transform .18s ease}
.browse-tile:hover .bt-ic{transform:scale(1.06)}
.browse-tile .bt-ic svg{width:24px;height:24px}
.browse-tile .bt-name{display:block;font-weight:600;font-size:16px;color:var(--ink)}
.browse-tile .bt-count{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.browse-tile .bt-arrow{position:absolute;top:24px;right:20px;width:18px;height:18px;color:var(--muted-2);opacity:0;transform:translateX(-5px);transition:opacity .18s ease,transform .18s ease}
.browse-tile:hover .bt-arrow{opacity:1;transform:translateX(0);color:var(--brand)}
.browse-tile.cat[data-cat="payments"] .bt-ic{background:var(--brand-softer);color:var(--brand)}
.browse-tile.cat[data-cat="tax-compliance"] .bt-ic{background:var(--success-soft);color:#047857}
.browse-tile.cat[data-cat="ai"] .bt-ic{background:#F3E8FF;color:#7c3aed}
.browse-tile.cat[data-cat="orchestration"] .bt-ic{background:var(--warning-soft);color:#92660a}
.browse-tile.cat[data-cat="geolocation"] .bt-ic{background:#E1EFFF;color:var(--brand-dark)}
.browse-tile.plat[data-plat="whmcs"] .bt-ic{background:#e9eff5;color:#163753}
.browse-tile.plat[data-plat="wordpress"] .bt-ic{background:#e6f0f5;color:#21759b}
.browse-tile.plat[data-plat="shopify"] .bt-ic{background:#eef6e2;color:#5e8e3e}
.browse-tile.plat[data-plat="other"] .bt-ic{background:var(--success-soft);color:#047857}
.browse-tile.plat[data-plat="all"] .bt-ic{background:var(--brand-softer);color:var(--brand)}
@media (max-width:880px){.browse-grid,.browse-grid.platforms{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.browse-grid,.browse-grid.platforms{grid-template-columns:1fr}}
/* directory listing layout */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{margin:0 8px;color:var(--line-2)}
.breadcrumb .cur{color:var(--ink-2);font-weight:500}
.directory{display:grid;grid-template-columns:248px 1fr;gap:44px;align-items:start}
.dir-sidebar{position:sticky;top:104px}
.dir-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:9px 14px;background:#fff;margin-bottom:24px}
.dir-search:focus-within{border-color:var(--brand)}
.dir-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.dir-search input{border:0;outline:0;background:none;font:inherit;font-size:14px;width:100%;color:var(--ink)}
.dir-facet{margin-bottom:26px}
.dir-facet h4{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 8px;font-weight:600}
.dir-facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.dir-facet a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:8px;font-size:14px;color:var(--ink-2);cursor:pointer}
.dir-facet a:hover{background:var(--bg-soft);color:var(--ink)}
.dir-facet a.active{background:var(--brand-soft);color:var(--brand);font-weight:500}
.dir-facet a .c{font-size:12px;color:var(--muted-2)}
.dir-facet a.active .c{color:var(--brand)}
.dir-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.dir-title{font-size:28px;line-height:34px}
.dir-sort{display:flex;align-items:center;gap:16px}
.dir-count{font-size:13px;color:var(--muted);white-space:nowrap}
.sort-label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dir-sort select{font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.dir-main .grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1180px){.dir-main .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:880px){.directory{grid-template-columns:1fr;gap:24px}.dir-sidebar{position:static}.dir-facet ul{flex-direction:row;flex-wrap:wrap;gap:6px}.dir-facet a{border:1px solid var(--line-2)}}
@media (max-width:560px){.dir-main .grid{grid-template-columns:1fr}}
@media (max-width:991px){.filters{top:74px}}
@media (max-width:640px){.filters{position:static}.filters-row{flex-direction:column;align-items:stretch}}

/* ---------- Grid ---------- */
.grid-section{padding:56px 0 80px;background:#fff}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:991px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-card);
  position:relative;
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color:inherit;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:transparent}
/* Coming-soon cards render as a <div> (not <a>): disable hover-lift + clarify non-interactivity. */
.card-soon{cursor:default}
.card-soon:hover{transform:none;box-shadow:var(--shadow-card);border-color:var(--line)}
.card-hidden{display:none}

.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.card-icon{
  width:56px;height:56px;border-radius:12px;
  background:var(--brand-softer);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-icon svg{width:28px;height:28px}
/* Category tints apply to the generic glyph icons only. Brand/provider icons
   (.card-icon.brand) always sit on a white tile — matching phonepe/zoho/razorpay. */
.card[data-category="tax-compliance"] .card-icon:not(.brand){background:var(--success-soft);color:#047857}
.card[data-category="ai"] .card-icon:not(.brand){background:#F3E8FF;color:#7c3aed}
.card[data-category="orchestration"] .card-icon:not(.brand){background:var(--warning-soft);color:#92660a}
.card[data-category="geolocation"] .card-icon:not(.brand){background:#E1EFFF;color:var(--brand-dark)}

.card-status{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pill-version{background:rgba(16,98,254,.10);color:var(--brand);border-color:rgba(16,98,254,.18);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}

.card-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}

.card h3{font-size:20px;line-height:28px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.card .tagline{font-size:14px;line-height:22px;color:var(--muted);margin:0 0 22px;font-weight:300}

.card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;border-top:1px dashed var(--line);
}
.card-price{font-size:13px;color:var(--muted);font-weight:400}
.card-price strong{font-family:var(--font-mono);color:var(--ink);font-weight:500;font-size:14px}
.card-cta{font-size:14px;font-weight:500;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.card-cta svg{width:14px;height:14px;transition:transform .15s ease}
.card:hover .card-cta svg{transform:translateX(3px)}

/* ---------- Trust band ---------- */
.trust{background:var(--bg-soft);padding:var(--section-y) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-head{text-align:center;max-width:680px;margin:0 auto 56px}
.trust-head h2{margin-bottom:12px}
.trust-head .sub{font-size:17px;line-height:26px;color:var(--muted);font-weight:300}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:991px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr}}

.tcard{
  background:#fff;border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-card);
}
.tcard-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-softer);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.tcard-icon svg{width:22px;height:22px}
.tcard h4{font-size:18px;font-weight:500;line-height:24px;margin-bottom:8px;color:var(--ink)}
.tcard p{margin:0;font-size:14px;line-height:22px;color:var(--muted);font-weight:300}

.tcard-icon-check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawcheck 1.4s ease-out forwards}
@keyframes drawcheck{to{stroke-dashoffset:0}}

/* ---------- FAQ ---------- */
.faq{padding:var(--section-y) 0;background:#fff}
.faq-head{text-align:center;max-width:680px;margin:0 auto 48px}
.faq-head h2{margin-bottom:12px}
.faq-head .sub{font-size:17px;color:var(--muted);font-weight:300}
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.faq-item[open]{border-color:var(--brand-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;font-weight:500;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";display:inline-block;width:12px;height:12px;flex-shrink:0;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease, border-color .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.faq-item .ans{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:24px;font-weight:300}
.faq-item .ans p{margin:0 0 10px}
.faq-item .ans p:last-child{margin:0}

/* ---------- Changelog / release history ---------- */
.changelog-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.changelog-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.changelog-item[open]{border-color:var(--brand-soft)}
.changelog-head{
  list-style:none;cursor:pointer;padding:18px 22px;
  display:flex;align-items:center;gap:12px;
}
.changelog-head::-webkit-details-marker{display:none}
.changelog-ver{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.changelog-date{font-size:13px;color:var(--muted);font-weight:400}
.changelog-latest{
  font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  background:rgba(16,98,254,.10);color:var(--brand);border:1px solid rgba(16,98,254,.18);
  padding:2px 8px;border-radius:var(--radius-pill);line-height:16px;
}
.changelog-chevron{width:18px;height:18px;color:var(--muted-2);margin-left:auto;flex-shrink:0;transition:transform .2s ease,color .2s ease}
.changelog-item[open] .changelog-chevron{transform:rotate(180deg);color:var(--brand)}
.changelog-body{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:25px;font-weight:300}
.changelog-body h1,.changelog-body h2,.changelog-body h3,.changelog-body h4{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.02em;text-transform:uppercase;margin:18px 0 8px}
.changelog-body h1:first-child,.changelog-body h2:first-child,.changelog-body h3:first-child{margin-top:4px}
.changelog-body ul{margin:0 0 12px;padding-left:20px}
.changelog-body li{margin-bottom:5px}
.changelog-body p{margin:0 0 10px}
.changelog-body a{color:var(--brand)}
.changelog-body code{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;font-family:var(--font-mono);font-size:12.5px}

/* ---------- Rich-page pricing cards ---------- */
/* Single canonical source for `.price-*` styling on rich pages. Replaces each page's
   own per-page rules so styling is identical across relyagent, relypay, gst-manager,
   geosync-pro, payglocal-whmcs, phonepe-whmcs, zoho-payments. Layout uses flex-wrap
   centred so the grid adapts to whichever number of cards survive the porter's
   plan-dedup (1 or 2 cards). */
.price-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:24px;
  max-width:880px;margin:0 auto;
}
.price-grid > .price-card{flex:1 1 380px;max-width:428px;min-width:0}
@media (max-width:620px){
  .price-grid > .price-card{flex-basis:100%;max-width:none}
}

.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px 30px;
  position:relative;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.price-card.popular{border-color:var(--ink);background:var(--ink);color:#fff}
.price-card.popular h3,
.price-card.popular .price-amount .currency,
.price-card.popular .price-amount .num{color:#fff}
.price-card.popular .price-feat{color:#d6dbe7}
.price-card.popular .price-feat svg{color:var(--brand-light)}
.price-card.popular .price-amount small,
.price-card.popular .price-tagline,
.price-card.popular .price-note{color:#9aa5bc}
.price-card.popular .btn-default{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.price-card.popular .btn-default:hover{background:rgba(255,255,255,.14)}

.price-popular-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--brand-light);color:#fff;
  padding:5px 14px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;letter-spacing:.08em;
}

.price-card h3{margin:0 0 4px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.price-tagline{margin:0 0 22px;font-size:14px;color:var(--muted);font-weight:300}

.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.price-amount .currency{font-size:22px;font-weight:500}
.price-amount .num{font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1}
.price-amount small{font-size:14px;color:var(--muted);font-weight:400}
.price-note{font-size:12px;color:var(--muted-2);margin:6px 0 22px}

.price-feats{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.price-feat{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-2);font-weight:300}
.price-feat svg{width:18px;height:18px;color:var(--success);flex-shrink:0;margin-top:2px}

.price-cta{width:100%;justify-content:center}

.price-foot{text-align:center;margin-top:28px;font-size:13px;color:var(--muted);font-weight:300}
.price-foot strong{color:var(--ink);font-weight:500}

/* Multi-module pricing on PayGlocal — sub-section header above each price-grid. */
.price-group + .price-group{margin-top:48px}
.price-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px;margin:0 0 18px;text-align:center}
.price-group-head h3{font-size:20px;font-weight:600;margin:0;color:var(--ink)}
.price-group-head .premium{background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);letter-spacing:.06em}
.price-group-head .mono{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* ---------- "Let's get started" CTA band ---------- */
/* The CTA card straddles a white/gray boundary that cuts horizontally through its middle.
   Achieved by painting the LOWER half of .cta-band gray via a `::after` pseudo-element
   (matching .foot's gradient), then sitting the card on top. This is fully independent of
   margin-collapse — so it works the same regardless of whether the page's own <style>
   block adds `body { padding }` or other layout quirks. */
.cta-band{
  background:#fff;
  padding:var(--section-y) 0;
  position:relative;
}
.cta-band::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:50%;
  background:linear-gradient(270deg,#F3F5F7,#FCFCFD);
  z-index:0;
}
.cta-band > .wrap{position:relative;z-index:1}
.cta-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:48px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  box-shadow:0 10px 36px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  position:relative;z-index:2;
}
.cta-card h3{font-size:30px;line-height:38px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.cta-card p{margin:0;color:var(--muted);font-size:16px;font-weight:300}
.cta-actions{display:flex;gap:12px;flex-shrink:0}
@media (max-width:768px){
  .cta-card{flex-direction:column;align-items:flex-start;padding:36px 28px;text-align:left}
  .cta-card h3{font-size:24px;line-height:32px}
}

/* ---------- Footer ---------- */
/* .foot continues the same gradient seamlessly from where .cta-band::after ended. No
   negative margin needed — the gray is "extended into" the card area via the band's
   pseudo-element above. padding-top is just the visible breathing room from card-bottom
   to where the column content begins. */
.foot{
  background:linear-gradient(270deg,#F3F5F7,#FCFCFD);
  border-top:0;
  padding:0 0 32px;
  color:var(--muted);
}
@media (max-width:768px){
  .foot{padding:0 0 28px}
}
@media (min-width:1280px){
  .foot{padding:0 0 32px}
}
/* Footer column widths match relyweb.co's main-site footer:
   - Brand column: max-width 280px (logo, address, socials, payments)
   - Link columns: equal 1fr each (Products / Security & Tools / Company) */
.foot-grid{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:40px;align-items:start}
@media (max-width:991px){.foot-grid{grid-template-columns:1fr 1fr}.foot-co{grid-column:span 2}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-co{grid-column:span 1}}
.foot h5{
  font-size:19px;line-height:28px;font-weight:500;color:var(--ink);margin:0 0 18px;
}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot li a{font-size:17px;line-height:26px;font-weight:300;color:var(--muted);transition:color .15s ease}
.foot li a:hover{color:var(--brand)}
/* First column — logo, address, socials, payments — stacked with a consistent rhythm. */
/* The brand column itself: max-width:280px also caps the column when the grid stretches it
   (e.g. on mid-size screens). Items inside keep the existing 18px stacking gap. */
.foot-co{font-size:14px;line-height:22px;font-weight:300;display:flex;flex-direction:column;gap:18px;max-width:280px;min-width:0}
.foot-co p{margin:0}

.foot-logo{display:block;line-height:0}
.foot-logo img{height:50px;width:auto;display:block}

.foot-desc{margin:0;font-size:13.5px;line-height:21px;font-weight:300;color:var(--muted)}
.foot-desc strong{color:var(--ink);font-weight:500;font-size:14px;letter-spacing:.01em}

/* Higher specificity than `.foot ul {flex-direction:column}` so the social icons stay horizontal. */
ul.foot-socials{list-style:none;padding:0;margin:0;display:flex;flex-direction:row;gap:8px}
ul.foot-socials a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
ul.foot-socials a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Payment gateway icons — markup + class names copied 1:1 from relyweb.co's main-site
   footer. The background lives on each <svg> itself; `.fill-white` / `.fill-gray` are
   intentionally NOT defined globally — Lagom2 only sets them under the dark footer
   variants (.main-footer-extended-primary / -secondary / .lagom-dark-mode). Under the
   default ("-gray") footer the rules don't apply, so each path's inline `fill="…"`
   attribute drives the color — same as relyweb.co. */
.footer-payment{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.footer-payment-gateway{display:flex;flex-wrap:wrap;gap:8px;padding:0}
.footer-payment-gateway > i{display:inline-flex;font-style:normal;line-height:0}
.footer-payment-gateway svg{background:#efeff1;border-radius:4px;display:block;width:48px;height:32px}
/* Only the UPI Illustrator export uses anonymous class-only paths (no inline fill);
   define its NPCI brand palette so paths aren't invisible. */
.footer-payment-gateway svg .st0{fill:#008C45}
.footer-payment-gateway svg .st1{fill:#F47920}
.footer-payment-gateway svg .st2{fill:#29387E}
.foot-copy{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  text-align:center;font-size:13px;color:var(--muted);
}

/* Reveal helpers */
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.08s}
.reveal.d2{animation-delay:.16s}
.reveal.d3{animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* apps-directory marketplace nav */
.filters{scroll-margin-top:96px}

/* ---- nav (server-rendered in Laravel; ported from catalog-nav.js) ---- */
.nav-links{gap:4px}
.nav-links .nav-login{background:var(--brand);color:#fff;padding:9px 20px;border-radius:var(--radius-sm);font-weight:500;font-size:15px;line-height:20px;margin-left:12px;transition:background .15s ease}
.nav-links .nav-login:hover{background:var(--brand-light);color:#fff}
.nav-links .nav-login::after{display:none!important}
@media (max-width:991px){
  .nav.mobile-open .nav-links{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-nav);padding:8px 20px 18px;gap:0}
  .nav.mobile-open .nav-links>a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav.mobile-open .nav-links .nav-login{margin:16px 0 4px;padding:13px;text-align:center;border-bottom:0}
}